Collapse

Toggle content visibility with smooth animations

The collapse component toggles content visibility with smooth height or width animations. It powers accordions and expandable sections.

The .collapse class hides content. Toggling adds .show to reveal it. Use data-bs-toggle="collapse" on a button and point to the target with data-bs-target.

<button data-bs-toggle="collapse"
  data-bs-target="#content">
  Toggle
</button>

<div class="collapse" id="content">
  <div class="card card-body">
    Hidden content revealed.
  </div>
</div>

Click the button to toggle content visibility

29 / 37