Collapse

Prev Next

Collapse is Bootstrap 5's plumbing for showing and hiding a block of content with a smooth height animation. It looks like the simplest interactive component in the whole track, and in a sense it is — but it's also the one other components quietly depend on. We'll build a TrailMap trail-details panel that expands and collapses, then look at where else this exact mechanism shows up.

The Two Pieces: Toggle and Target

A collapse needs exactly two things: a trigger with data-bs-toggle="collapse" and data-bs-target pointing at an element's id, and that target element carrying the .collapse class itself.

<button class="btn btn-outline-secondary" type="button"
  data-bs-toggle="collapse" data-bs-target="#trailExtraInfo"
  aria-expanded="false" aria-controls="trailExtraInfo">
  Show More Details
</button>

<div class="collapse" id="trailExtraInfo">
  <div class="card card-body">
    Extra trail details go here.
  </div>
</div>

With no other classes, .collapse starts hidden (height: 0, display: none once fully closed). Clicking the trigger animates the target's height open, adds a .collapsing class mid-transition, then settles on .collapse.show once fully open.

Starting Open by Default: the .show Class

Add .show alongside .collapse on the target and it renders already expanded on page load, while remaining fully collapsible afterward:

<div class="collapse show" id="trailExtraInfo">
  ...
</div>

Note: if the target starts open with .show, set the trigger's initial aria-expanded="true" to match — Bootstrap's JS keeps it in sync after that, but the first render is on you.

Worked Example: TrailMap Trail Details Expand/Collapse

A trail-detail page shows the essentials up front and tucks secondary information — permit requirements, parking notes, nearest ranger station — behind a "Show More Details" toggle so the page stays scannable:

<h4>Ridgeline Loop</h4>
<p>7.2 mi · Moderate · 1,400 ft elevation gain</p>

<button class="btn btn-sm btn-outline-secondary mb-2" type="button"
  data-bs-toggle="collapse" data-bs-target="#trailExtraInfo"
  aria-expanded="false" aria-controls="trailExtraInfo">
  Show More Details
</button>

<div class="collapse" id="trailExtraInfo">
  <div class="card card-body">
    <ul class="mb-0">
      <li>Permit required April–October</li>
      <li>Trailhead lot fits ~25 cars, fills by 8am on weekends</li>
      <li>Nearest ranger station: Pine Ridge, 6 mi east</li>
    </ul>
  </div>
</div>

One trigger, one target, one shared id — that's the entire mechanism, and it didn't need a single line of custom JavaScript.

Collapse Is the Engine Behind Navbar and Accordion

This isn't just a standalone component — it's the same show/hide machinery reused elsewhere in Bootstrap 5:

Component	How it uses Collapse
Navbar	The hamburger toggler button uses `data-bs-toggle="collapse"` pointed at `.navbar-collapse`, which itself carries the plain `.collapse` class — that's why the nav links disappear into a menu on narrow screens.
Accordion	Every `.accordion-collapse` panel in an accordion is a `.collapse` element under the hood; the Accordion component just adds styling and the `data-bs-parent` grouping behavior on top.

Once you understand data-bs-toggle="collapse" plus data-bs-target here, the Navbar's mobile menu and the Accordion's expand/collapse panels stop looking like separate things to memorize — they're this same pattern with extra CSS on top.

Next: Head to Accordion to see Collapse wrapped into a full FAQ-style component.

Prev Next