Collapse

Overview #

The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element. The visibility of the collapse content is toggled via class changes:

• .collapse hides content
• .collapsing is applied during transitions
• .collapse.show shows content

Generally, we recommend using a <button> with the data-bs-target attribute. While not recommended from a semantic point of view, you can also use an <a> link with the href attribute (and a role="button"). In both cases, the data-bs-toggle="collapse" is required.

<!-- First collapse -->
<button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapse-example-1" aria-expanded="true" aria-controls="collapse-example-1">
  Shopping list <i class="fa-light fa-angle-down"></i>
</button>
<div class="collapse show" id="collapse-example-1">
  <div class="ps-4 mt-2">
    <ul class="list-unstyled mb-0">
      <li>&ndash; Milk</li>
      <li>&ndash; Eggs</li>
      <li>&ndash; Bread</li>
    </ul>
  </div>
</div>

<!-- Second collapse -->
<a href="#collapse-example-2" role="button" class="btn btn-link" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapse-example-2">
  My tasks <i class="fa-light fa-angle-down"></i>
</a>
<div class="collapse" id="collapse-example-2">
  <div class="ps-4 mt-2">
    <ul class="list-unstyled mb-0">
      <li>&ndash; Wake up</li>
      <li>&ndash; Make the bed</li>
      <li>&ndash; Get breakfast</li>
    </ul>
  </div>
</div>

Please note, if you want more traditional looking collapse panels, consider using the accordion component instead. Also note, the icon being used is taken from the Font Awesome icon library (opens in new tab).

Horizontal #

The collapse plugin supports horizontal collapsing. Add the .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element. Feel free to write your own inline styles, or use our width utilities.

<button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapse-example-3" aria-expanded="true" aria-controls="collapse-example-3">
  Shopping list <i class="fa-light fa-angle-right"></i>
</button>
<div style="min-height: 76px;">
  <div class="collapse show collapse-horizontal" id="collapse-example-3">
    <div class="ps-4 mt-2" style="width: 200px;">
      <ul class="list-unstyled mb-0">
        <li>&ndash; Milk</li>
        <li>&ndash; Eggs</li>
        <li>&ndash; Bread</li>
      </ul>
    </div>
  </div>
</div>

The width requirement makes horizontal collapse components harder to get right, especially for all screen sizes. When in doubt, it's best to use the default collapse.

Multiple toggles and targets #

A <button> or <a> element can show and hide multiple elements by referencing them with a selector in its data-bs-target or href attribute. Conversely, multiple <button> or <a> elements can show and hide the same element if they each reference it with their data-bs-target or href attribute.

<!-- First collapse -->
<button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapse-example-4" aria-expanded="true" aria-controls="collapse-example-4">
  Shopping list <i class="fa-light fa-angle-down"></i>
</button>
<div class="collapse show multi-collapse" id="collapse-example-4">
  <div class="ps-4 mt-2">
    <ul class="list-unstyled mb-0">
      <li>&ndash; Milk</li>
      <li>&ndash; Eggs</li>
      <li>&ndash; Bread</li>
    </ul>
  </div>
</div>

<!-- Second collapse -->
<a href="#collapse-example-5" role="button" class="btn btn-link" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapse-example-5">
  My tasks <i class="fa-light fa-angle-down"></i>
</a>
<div class="collapse show multi-collapse" id="collapse-example-5">
  <div class="ps-4 mt-2">
    <ul class="list-unstyled mb-0">
      <li>&ndash; Wake up</li>
      <li>&ndash; Make the bed</li>
      <li>&ndash; Get breakfast</li>
    </ul>
  </div>
</div>

<!-- Toggle for both -->
<button type="button" class="btn btn-primary d-block w-100" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="collapse-example-4 collapse-example-5">Toggle both</button>

In the above example, the last button targets both the collapse components via the .multi-collapse selector in its data-bs-target attribute. This class is added to both the panels so that the targeting works properly.

Accessibility #

Be sure to add aria-expanded to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of aria-expanded="false". If you've set the collapsible element to be open by default using the .show class, set aria-expanded="true" on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element's HTML element is not a button (e.g., an <a> or <div>), the attribute role="button" should be added to the element.

If your control element is targeting a single collapsible element – i.e. the data-bs-target attribute is pointing to an id selector – you should add the aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.

Note that this current implementation does not cover the various optional keyboard interactions described in the ARIA Authoring Practices Guide accordion pattern (opens in new tab) - you will need to include these yourself with custom JavaScript.

JavaScript usage #

The examples on this page use data-bs-* attributes for functionality, which is usually enough to cover a majority of use-cases. You can read about options, methods, events, and more in the official Bootstrap documentation.

Collapse - Bootstrap
Continue reading on the offical documentation website