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:

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

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:

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.