Accordions

Extend the default collapse behaviour to create an accordion.

<div id="accordion-1" role="tablist" aria-multiselectable="true">
<div class="card card-white">
<div class="card-header" role="tab" id="heading-1">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
Basic tabs
</a>
</h5>
</div>
<div id="collapse-1" class="collapse show" role="tabpanel" aria-labelledby="heading-1">
<div class="card-block">
<p>3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.</p>
</div>
</div>
</div>
<div class="card card-white">
<div class="card-header" role="tab" id="heading-2">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
Closed item
</a>
</h5>
</div>
<div id="collapse-2" class="collapse" role="tabpanel" aria-labelledby="heading-2">
<div class="card-block">
<p>3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.</p>
</div>
</div>
</div>
<div class="card card-white">
<div class="card-header" role="tab" id="heading-3">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
Closed item 2
</a>
</h5>
</div>
<div id="collapse-3" class="collapse" role="tabpanel" aria-labelledby="heading-3">
<div class="card-block">
<p>3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.</p>
</div>
</div>
</div>
</div>
Last Updated 5 years ago
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages