Accordions show a brief summary and expand to show additional content.
<div class="accordion">
<div class="accordion-item">
<a class="accordion-header" data-toggle="accordion" aria-expanded="false">Accordion Item 1</a>
<div class="accordion-collapse hidden">
<div class="accordion-body">
<p>This is the first item's accordion body.</p>
</div>
</div>
</div>
<div class="accordion-item">
<a class="accordion-header" data-toggle="accordion" aria-expanded="false">Accordion Item 2</a>
<div class="accordion-collapse hidden">
<div class="accordion-body">
<p>This is the second item's accordion body.</p>
</div>
</div>
</div>
<div class="accordion-item">
<a class="accordion-header" data-toggle="accordion" aria-expanded="false">Accordion Item 3</a>
<div class="accordion-collapse hidden">
<div class="accordion-body">
<p>This is the third item's accordion body.</p>
</div>
</div>
</div>
</div>
On This Page
Examples