Collapse

Prev Next

The Collapse plugin expands and collapses a block of content, and doubles as the building block for accordions. We'll build a TrailMap "trail details" expand/collapse section, then combine several of them into a small accordion.

Basic Markup: data-toggle="collapse" + data-target

The trigger carries data-toggle="collapse" and a data-target pointing at the collapsible element's id. The collapsible element itself carries the .collapse class.

<!-- TrailMap: expandable trail details -->
<button class="btn btn-default" data-toggle="collapse" data-target="#trailDetails">
  Show Full Trail Details
</button>

<div class="collapse" id="trailDetails">
  <div class="well">
    Elevation gain: 850 ft. Surface: dirt and rock. Dogs allowed on leash.
  </div>
</div>

Default-Open State: .in (Not .show)

To have a collapsible section start open on page load, add .in alongside .collapse:

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

Bootstrap-3-specific naming: Bootstrap 3 uses .in as the "currently open" class. Bootstrap 4 renamed it to .show to match the naming used elsewhere in that release. If you're reading Bootstrap 4 code or tutorials, remember that .show there is .in here — they are not interchangeable within a single version.

Styling Hook: .collapsed on the Trigger

The plugin automatically toggles a .collapsed class on the trigger element itself whenever the target is closed (and removes it when open). It adds no visual style by default — it exists purely as a CSS hook, most often used to rotate a chevron icon:

<button class="btn btn-default" data-toggle="collapse" data-target="#trailDetails">
  Show Full Trail Details <span class="caret"></span>
</button>

/* rotate the caret 180deg once the trigger no longer has .collapsed */
.btn:not(.collapsed) .caret { transform: rotate(180deg); }

Accordion: Multiple Panels With a Shared data-parent

An accordion is just several Collapse triggers sharing one data-parent pointing at a common wrapper — opening one automatically closes the others in that same wrapper. This build-it-from-primitives technique is exactly what continued unchanged into Bootstrap 4:

<!-- TrailMap: FAQ-style accordion -->
<div id="trailFaqAccordion">

  <div class="panel panel-default">
    <div class="panel-heading">
      <a data-toggle="collapse" data-parent="#trailFaqAccordion" href="#faqDogs">Are dogs allowed?</a>
    </div>
    <div id="faqDogs" class="panel-collapse collapse in">
      <div class="panel-body">Yes, on a leash no longer than 6 feet.</div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <a data-toggle="collapse" data-parent="#trailFaqAccordion" href="#faqParking">Is there parking at the trailhead?</a>
    </div>
    <div id="faqParking" class="panel-collapse collapse">
      <div class="panel-body">Yes, a free lot with 20 spaces, first come first served.</div>
    </div>
  </div>

</div>

No special "accordion" class: notice there's no dedicated accordion component class anywhere here — it's plain .panel elements plus .collapse plus a shared data-parent. That's the whole technique, in Bootstrap 3 and in Bootstrap 4 alike.

Up next: Carousel & Affix — an image slideshow plugin, and the sticky-positioning plugin that Bootstrap 4 later removed entirely.

Prev Next