Collapse Extensions

Extends Bootstrap’s collapse component with data attributes to show or hide all matching collapse elements at once.

Bootstrap’s native data-bs-toggle="collapse" toggles a single element. These extensions add two new toggle values that act on every element matching a CSS class selector — useful for “Expand All” / “Collapse All” controls.

How it works

Two new values for data-bs-toggle are provided:

Value	Behavior
`collapse-show`	Calls `.show()` on every element matching `data-bs-target`
`collapse-hide`	Calls `.hide()` on every element matching `data-bs-target`

data-bs-target accepts any CSS selector and works the same way as Bootstrap’s native collapse targeting. Individual elements can still be toggled independently using Bootstrap’s standard data-bs-toggle="collapse" with an #id target.

Show all / Hide all

Use data-bs-target with a shared CSS class to control a group of collapse elements.

First item content.

Second item content.

Third item content.

<p class="d-flex gap-2">
  <button type="button" class="btn btn-outline-secondary" data-bs-toggle="collapse-show" data-bs-target=".demo-collapse-item">Expand All</button>
  <button type="button" class="btn btn-outline-secondary" data-bs-toggle="collapse-hide" data-bs-target=".demo-collapse-item">Collapse All</button>
</p>

<div class="demo-collapse-item collapse show mb-2" id="demo-item-1">
  <div class="card card-body">First item content.</div>
</div>
<div class="demo-collapse-item collapse show mb-2" id="demo-item-2">
  <div class="card card-body">Second item content.</div>
</div>
<div class="demo-collapse-item collapse show mb-2" id="demo-item-3">
  <div class="card card-body">Third item content.</div>
</div>

Combined with individual toggles

Group controls and individual toggles can coexist. The group buttons act on all matching elements; each individual button acts only on its own target.

Step 1 content.

Step 2 content.

Step 3 content.

<p class="d-flex gap-2 mb-3">
  <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="collapse-show" data-bs-target=".demo-step-item">Expand All</button>
  <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="collapse-hide" data-bs-target=".demo-step-item">Collapse All</button>
</p>

<div class="mb-2">
  <button class="btn btn-outline-primary w-100 text-start mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#demo-step-1" aria-expanded="true" aria-controls="demo-step-1">Step 1</button>
  <div class="demo-step-item collapse show" id="demo-step-1">
    <div class="card card-body">Step 1 content.</div>
  </div>
</div>
<div class="mb-2">
  <button class="btn btn-outline-primary w-100 text-start mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#demo-step-2" aria-expanded="true" aria-controls="demo-step-2">Step 2</button>
  <div class="demo-step-item collapse show" id="demo-step-2">
    <div class="card card-body">Step 2 content.</div>
  </div>
</div>
<div class="mb-2">
  <button class="btn btn-outline-primary w-100 text-start mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#demo-step-3" aria-expanded="true" aria-controls="demo-step-3">Step 3</button>
  <div class="demo-step-item collapse show" id="demo-step-3">
    <div class="card card-body">Step 3 content.</div>
  </div>
</div>

Usage notes

Collapse elements must have the shared CSS class on the same element that has the collapse class.
collapse-show and collapse-hide always act in one direction — no toggling — making their intent unambiguous to the user.
Uses bootstrap.Collapse.getOrCreateInstance() internally, so Bootstrap’s transition animations and events fire normally.