Toggle the visibility of content across your project with a few classes and our JavaScript plugins.

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. Collapsing an element will animate theheight from its current value to0. Given how CSS handles animations, you cannot usepadding on a.collapse element. Instead, use the class as an independent wrapping element.

Example

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

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

Generally, we recommend using a button with thedata-bs-target attribute. While not recommended from a semantic point of view, you can also use a link with thehref attribute (and arole="button"). In both cases, thedata-bs-toggle="collapse" is required.

<p><aclass="btn btn-primary"data-bs-toggle="collapse"href="#collapseExample"role="button"aria-expanded="false"aria-controls="collapseExample">    Link with href</a><buttonclass="btn btn-primary"type="button"data-bs-toggle="collapse"data-bs-target="#collapseExample"aria-expanded="false"aria-controls="collapseExample">    Button with data-bs-target</button></p><divclass="collapse"id="collapseExample"><divclass="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 also supports horizontal collapsing. Add the.collapse-horizontal modifier class to transition thewidth instead ofheight and set awidth on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use ourwidth utilities.

<p><buttonclass="btn btn-primary"type="button"data-bs-toggle="collapse"data-bs-target="#collapseWidthExample"aria-expanded="false"aria-controls="collapseWidthExample">    Toggle width collapse</button></p><divstyle="min-height: 120px;"><divclass="collapse collapse-horizontal"id="collapseWidthExample"><divclass="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 targets

A<button> or<a> can show and hide multiple elements by referencing them with a selector in itshref ordata-bs-target attribute.Multiple<button> or<a> can show and hide an element if they each reference it with theirhref ordata-bs-target attribute

<p><aclass="btn btn-primary"data-bs-toggle="collapse"href="#multiCollapseExample1"role="button"aria-expanded="false"aria-controls="multiCollapseExample1">Toggle first element</a><buttonclass="btn btn-primary"type="button"data-bs-toggle="collapse"data-bs-target="#multiCollapseExample2"aria-expanded="false"aria-controls="multiCollapseExample2">Toggle second element</button><buttonclass="btn btn-primary"type="button"data-bs-toggle="collapse"data-bs-target=".multi-collapse"aria-expanded="false"aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button></p><divclass="row"><divclass="col"><divclass="collapse multi-collapse"id="multiCollapseExample1"><divclass="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><divclass="col"><divclass="collapse multi-collapse"id="multiCollapseExample2"><divclass="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 addaria-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 ofaria-expanded="false". If you’ve set the collapsible element to be open by default using theshow class, setaria-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 attributerole="button" should be added to the element.

If your control element is targeting a single collapsible element – i.e. thedata-bs-target attribute is pointing to anid selector – you should add thearia-controls attribute to the control element, containing theid 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 variousoptional keyboard interactions described in theARIA Authoring Practices Guide accordion pattern - you will need to include these yourself with custom JavaScript.

Sass

Variables

$transition-collapse:height.35sease;$transition-collapse-width:width.35sease;

Classes

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

.collapse{&:not(.show){display:none;}}.collapsing{height:0;overflow:hidden;@include transition($transition-collapse);&.collapse-horizontal{width:0;height:auto;@include transition($transition-collapse-width);}}

Usage

The collapse plugin utilizes a few classes to handle the heavy lifting:

• .collapse hides the content
• .collapse.show shows the content
• .collapsing is added when the transition starts, and removed when it finishes

These classes can be found in_transitions.scss.

Via data attributes

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

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

Via JavaScript

Enable manually with:

constcollapseElementList=document.querySelectorAll('.collapse')constcollapseList=[...collapseElementList].map(collapseEl=>newbootstrap.Collapse(collapseEl))

Options

As options can be passed via data attributes or JavaScript, you can append an option name todata-bs-, as indata-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, usedata-bs-custom-class="beautifier" instead ofdata-bs-customClass="beautifier".

As of Bootstrap 5.2.0, all components support anexperimental reserved data attributedata-bs-config that can house simple component configuration as a JSON string. When an element hasdata-bs-config='{"delay":0, "title":123}' anddata-bs-title="456" attributes, the finaltitle value will be456 and the separate data attributes will override values given ondata-bs-config. In addition, existing data attributes are able to house JSON values likedata-bs-delay='{"show":0,"hide":150}'.

Methods

Activates your content as a collapsible element. Accepts an optional optionsobject.

You can create a collapse instance with the constructor, for example:

constbsCollapse=newbootstrap.Collapse('#myCollapse',{toggle:false})

Events

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

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