Collapse

Collapse lets you show and hide a block of content with a smooth slide animation, triggered by a button or link. It sounds small, but it's a foundational piece — Bootstrap 4's Navbar uses it to toggle the mobile menu, and (as we'll see next lesson) the Accordion pattern is just Collapse applied to a group of cards. We'll use it here to build a "trail details" section for TrailMap that hikers can expand on demand.

The .collapse Class and data-toggle="collapse"

The content you want to hide/show gets the .collapse class, which hides it by default. A trigger element (usually a button or link) gets data-toggle="collapse" plus a data-target pointing at the collapsible element's id.

<button class="btn btn-outline-secondary"
  data-toggle="collapse" data-target="#trailDetails">
  Show details
</button>

<div class="collapse" id="trailDetails">
  <div class="card card-body">
    Hidden content goes here.
  </div>
</div>

Showing By Default: the .show Class

Add .show alongside .collapse to have the panel start open instead of closed. The trigger button still toggles it normally after that.

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

Worked Example: TrailMap Trail Details Expand/Collapse

On a trail listing card, we show the basics up front and let hikers expand a details panel for the full description, elevation profile notes, and trail conditions.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Ridgeline Loop</h5>
    <p class="card-text">4.2 mi · Moderate · 620 ft gain</p>
    <button class="btn btn-sm btn-outline-primary"
      data-toggle="collapse" data-target="#ridgelineDetails">
      Show full details
    </button>
    <div class="collapse mt-3" id="ridgelineDetails">
      <p>Starts at the north trailhead parking lot, climbs the ridge in a series of switchbacks, then loops back along the creek. Best in spring and fall; can be muddy after rain.</p>
    </div>
  </div>
</div>

Collapse Under the Hood: Navbar and Accordion

Collapse isn't just a standalone component — it's the mechanism Bootstrap 4 reuses everywhere content needs to slide open and closed. The Navbar's mobile hamburger menu is a .collapse element toggled by data-toggle="collapse" on the toggler button, exactly like our trail details panel above. And, as the next lesson covers, an Accordion in Bootstrap 4 is nothing more than several Collapse panels grouped together with one extra attribute.