JSFiddle - React, Tailwind, and code Playground
by Florian Gropp
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group Item #1</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="list-group">
<a href="#" class="list-group-item"><span class="badge">1</span> First Item</a>
<a href="#" class="list-group-item"><span class="badge">12</span> Second Item</a>
<a href="#" class="list-group-item"><span class="badge">1</span> First Item</a>
<a href="#" class="list-group-item"><span class="badge">12</span> Second Item</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="list-group">
<a href="#" class="list-group-item"><span class="badge">1</span> First Item</a>
<a href="#" class="list-group-item"><span class="badge">12</span> Second Item</a>
<a href="#" class="list-group-item"><span class="badge">1</span> First Item</a>
<a href="#" class="list-group-item"><span class="badge">12</span> Second Item</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible Group Item #3</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="list-group">
<a href="#"...
CSS
.panel-group .list-group {
margin-bottom: 0;
}
.panel-group .list-group .list-group-item {
border-radius: 0;
border-left: none;
border-right: none;
}
.panel-group .list-group .list-group-item:last-child {
border-bottom: none;
}