Collapse

Collapse

The collapse component lets you show and hide content with a button. It is great for FAQs, accordions, and show/hide sections.

Basic collapse

<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">
  Simple collapsible
</button>

<div id="demo" class="collapse">
  Some collapsible content here.
</div>

How it works

• The button has data-bs-toggle="collapse".
• data-bs-target="#demo" points to the content to show/hide.
• The content has an id and the .collapse class.

Show content by default

Add .show to the content so it is visible by default:

<div id="demo" class="collapse show">
  Visible by default.
</div>

Accordion

Combining collapse with cards creates an accordion. Each card has a collapsible body, and only one section opens at a time using the parent .accordion class.

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        This is the first item's body.
      </div>
    </div>
  </div>
</div>

TL;DR

• data-bs-toggle="collapse" + data-bs-target="#id" controls content.
• The target content uses the .collapse class.
• .show makes content visible by default.
• Accordions use collapse with cards and .accordion.