.btn {
box-shadow: none !important;
outline: 0;
}
.list-group-item span {
border: solid #222;
border-width: 0 1px 1px 0;
display: inline;
cursor: pointer;
padding: 3px;
position: absolute;
right: 0;
margin-top: 10px;
}
.list-group-item a.btn.collapsed span {
transform: rotate(40deg);
-webkit-transform: rotate(40deg);
transition: .3s transform ease-in-out;
}
.list-group-item a.btn span {
transform: rotate(-140deg);
-webkit-transform: rotate(-140deg);
transition: .3s transform ease-in-out;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="my-5">
<ul class="list-group list-group-flush">
<li class="list-group-item px-0">
<a class="btn collapsed" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="true" aria-controls="collapseExample1">
Link with href<span class="mr-3"></span>
</a>
<div class="collapse" id="collapseExample1">
<div class="card card-body mt-2">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</li>
<li class="list-group-item px-0">
<a class="btn collapsed" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="true" aria-controls="collapseExample2">
Link with href<span class="mr-3"></span>
</a>
<div class="collapse" id="collapseExample2">
<div class="card card-body mt-2">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</li>
<li class="list-group-item px-0">
<a class="btn collapsed" data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="true" aria-controls="collapseExample3">
Link with href<span class="mr-3"></span>
</a>
<div class="collapse" id="collapseExample3">
<div class="card card-body mt-2">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>How can I add an extra link to another webpage within the text "Link with href?"
<li class="list-group-item px-0"> <a class="btn collapsed" data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="true" aria-controls="collapseExample3"> <a href="someURL">New Page Link</a> <span class="mr-3"></span> </a>
This is not working as expected. I want to have the link in the "arrow" section of the li element to expand the corresponding div, while also having another link within the text "Link with href" that directs to a different page. The layout gets disrupted when trying to include two anchor tags inside the same li element.