Skip to main content

Collapse in Bootstrap 5

Bootstrap Collapse​

Bootstrap provides a Collapse component that allows you to show and hide content with a toggle button or link.

The content can be anything such as text, images, videos, or other HTML elements.

As an example:

Editor

In this example:

  • A button with the class btn btn-primary is used as the toggle button. - The data-bs-toggle attribute is set to collapse and the data-bs-target attribute is set to the ID of the content that will be shown or hidden. In this case, the ID is collapseExample.
  • The content that will be shown or hidden is contained within a div element with the classes collapse and card card-body.
  • The id attribute of this div element matches the value of the data-bs-target attribute in the toggle button.
  • When the toggle button is clicked, the content with the matching id attribute will be shown or hidden.
tip

You can also add multiple collapse components to a page by using unique IDs for each one

Accordion​

An Accordion component that allows you to display collapsible content in a vertically stacked list of items.

Each item in the list contains a toggle button or link that can be used to show or hide the corresponding content.

As an example:

Editor

In this example:

  • A div element with the class accordion is used to contain the accordion items.
  • Each accordion item is contained within a div element with the class accordion-item. Each accordion item contains an h2 element with the class accordion-header and a toggle button or link that is used to show or hide the corresponding content.
  • The content for each accordion item is contained within a div element with the class accordion-collapse and the corresponding id attribute.
  • The data-bs-parent attribute is used to specify the parent element of the accordion items.