Collapse

How it works

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. The plugin only adds and removes .show—the CSS animates the size from 0 to the content size. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.

The animation needs interpolate-size. Browsers without it open and close the element at once. See Transitions to change the timing or to remove it.

Example

Click the buttons below to show and hide another element via class changes:

• .collapse hides content
• .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.

<p class="d-inline-flex gap-1">
  <a class="btn-solid theme-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn-solid theme-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Horizontal

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

<p>
  <button class="btn-solid theme-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 140px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It’s hidden by default and shown when triggered.
    </div>
  </div>
</div>

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.

<p class="d-inline-flex gap-1">
  <a class="btn-solid theme-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn-solid theme-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn-solid theme-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

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.

Collapse trigger state is represented by aria-expanded.

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 Bootstrap’s current implementation does not cover the various optional keyboard interactions described in the ARIA Authoring Practices Guide accordion pattern - you will need to include these yourself with custom JavaScript.

CSS

Sass variables

// stylelint-disable custom-property-no-missing-var-function
$collapse-tokens: defaults(
  (
    --transition-collapse-property: "block-size, display",
    --transition-collapse-duration: .35s,
    --transition-collapse-timing: ease,
  ),
  $collapse-tokens
);
// stylelint-enable custom-property-no-missing-var-function

Classes

Collapse transition classes can be found in scss/_transitions.scss as these are shared across multiple components (collapse and accordion).

// The browser animates the size itself. `interpolate-size` lets the `0` of the
// closed state interpolate to the `auto` of the open one, and `display`
// transitions discretely, so the element stays laid out until the size reaches
// `0`. The animated axis is clipped, so the content cannot spill while it moves.
.collapse {
  @include tokens($collapse-tokens);

  overflow-y: clip;
  @include transition-props(
    var(--transition-collapse-property),
    var(--transition-collapse-duration),
    var(--transition-collapse-timing),
    allow-discrete
  );

  // Browsers without `interpolate-size` open and close the element at once.
  @media (prefers-reduced-motion: no-preference) {
    interpolate-size: allow-keywords;
  }

  &:not(.show) {
    display: none;
    block-size: 0;
  }

  // A closed collapse is not rendered, so the open side needs a start value of
  // its own. Without it the element appears at full size at once.
  &.show {
    @starting-style {
      block-size: 0;
    }
  }

  // Horizontal collapses animate the inline size instead. The open size is
  // `fit-content`, so the element is as wide as its content, not as wide as its
  // container.
  &.collapse-horizontal {
    --transition-collapse-property: inline-size, display;

    inline-size: fit-content;
    overflow-x: clip;
    overflow-y: visible;

    &:not(.show) {
      inline-size: 0;
      block-size: auto;
    }

    &.show {
      @starting-style {
        inline-size: 0;
      }
    }
  }
}

Usage

The collapse plugin utilizes two classes to handle the heavy lifting:

• .collapse hides the content
• .collapse.show shows the content

These classes can be found in _transitions.scss. The plugin toggles .show and then waits for the CSS transition to finish before it fires shown.bs.collapse or hidden.bs.collapse.

Via data attributes

Just add data-bs-toggle="collapse" and a data-bs-target to the element to automatically assign control of one or more collapsible elements. The data-bs-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you’d like it to default open, add the additional class show.

To add accordion-like group management to a collapsible area, add the data attribute data-bs-parent="#selector". Refer to the accordion page for more information.

Via JavaScript

Enable manually with:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Dependencies

The collapse plugin requires the following JavaScript files if you’re building Bootstrap’s JS from source:

Options

As options can be passed via data attributes or JavaScript, you can append an option name to data-bs-, as in data-bs-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-bs-custom-class="beautifier" instead of data-bs-customClass="beautifier".

All components support a reserved data attribute data-bs-config that can house simple component configuration as a JSON string. When an element has data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-bs-config. In addition, existing data attributes are able to house JSON values like data-bs-delay='{"show":0,"hide":150}'.

The final configuration object is the merged result of data-bs-config, data-bs-, and js object where the latest given key-value overrides the others.

Methods

Activates your content as a collapsible element. Accepts an optional options object.

The constructor keeps the state that your markup declares. Add .show to open the element, and leave it off to keep the element closed. Call show(), hide(), or toggle() to change the state.

const bsCollapse = new bootstrap.Collapse('#myCollapse')
bsCollapse.show()

Events

Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})