Bootstrap 5 Collapse

Add collapsible content easily with Bootstrap's .collapse and related classes.

You can make your content collapsible by adding data-bs-toggle="collapse" to either a button or a hyperlink.

The button or link references the ID of the content to collapse.

Using a Link

Use the <a> tag with an href value of the ID of the content to collapse.

On the collapsible content's container, add the .collapse class, and be sure to give it an ID.

View Output

Using a Button

Use the data-bs-target attribute with a value of the ID of the content to collapse.

On the collapsible content's container, add the .collapse class, and be sure to give it an ID.

View Output

Accordion

Collapsible content is often used to make an "accordion". Accordions are popular for content such as FAQs, product overviews, etc

You can use Bootstrap cards to style the accordion like below.

Add the .show class to the collapsible content to have it expanded when the page loads. Also use aria-expanded="true" in this case.

View Output