Collapse and Accordion Summary

Collapse Summary

Bootstrap collapse toggles element visibility via CSS height animation using data attributes or JS API. Accordions group collapses for mutually exclusive sections. Use collapse for FAQs, filters, sidebars, read-more patterns, and responsive navbars.

Example

<!-- Collapse anatomy -->
<button data-bs-toggle="collapse" data-bs-target="#id" aria-expanded="false">Trigger</button>
<div class="collapse [show]" id="id">Content</div>
<!-- Accordion anatomy -->
<div class="accordion" id="parent">
  <div class="accordion-item">
    <button class="accordion-button [collapsed]" data-bs-toggle="collapse" data-bs-target="#item1">Q</button>
    <div id="item1" class="accordion-collapse collapse [show]" data-bs-parent="#parent">A</div>
  </div>
</div>

HTML

Full Editor

Pro Tip

Bootstrap collapse is zero-JS by default — JavaScript is only needed for programmatic control.

Related Resources

Bootstrap Reference

Complete tag & property list

Bootstrap How-To Guides

Step-by-step practical guides

Bootstrap Exercises

Practice what you've learned