Bootstrap 5 Collapse – Show/Hide Content [5 Examples]

What is Collapse Component in Bootstrap 5?

Bootstrap 5 collapse component allows to show/hide content in your website project by using a few classes and JavaScript Plug-ins.

An example of using collapse component with a button

In the following example, we used two buttons and mapped both with separate div elements. As this code is executed, the content of both divs is hidden.

As you click Button 1, it will display its content and upon clicking it again, it hides the content. Similarly, toggle button 2 shows/hides the content:

See online demo and code

Also, notice the data-bs-target value is mapped to the id of the corresponding div element. In that way, you may use multiple collapse elements on a single page by using separate buttons.

So how collapse component works?

The collapse component:

• To show/hide the content, a button or anchor is used.
• These buttons/links are mapped to the element like a paragraph that you want to show/hide.
• The collapse animates the height of the target element to 0.

Following Bootstrap 5 classes are used:

• .collapse class hides the content
• The .collapse.show class shows the content
• During transitions, the .collapsing class is applied

Using collapse element with a link rather than a button

As mentioned earlier, you may also map the content with links. The following example is almost like the above example except we used link tags rather than buttons.

See online demo and code

Toggle multiple elements with single button example

By using data-bs-target attribute or href (in case of link), you may toggle multiple elements by a single button or link.

See online demo and code

Following things are done in the above code:

• First button is an <a> tag with .btn
• Its href value is JAZMultiCollapseDemo1 which is mapped to the first <div> with content and also assigned to aria-controls of the third button.
• Second button data-bs-target is JAZMultiCollapseDemo2 which is mapped to second <div> and also assigned to the aria-controls of the second button.

Showing the content by default example

As shown in the above examples, the default behavior of the collapse component is to hide the content mapped with the toggle button.

You may change the default behavior so that content is visible as the web page loads.

For that, simply add the .show class to the .collapse in the target div.

See the example below which is just like the first example with buttons. We added the .show class to the first div and it will show the content as the web page loads.

No class is given to the second div, so it remains hidden:

See online demo and code

An example of an accordion using Bootstrap 5 Collapse

Bootstrap uses collapse component for creating accordions. We have a detailed tutorial written about it. The link can be seen after this example.

An example of creating a simple accordion using collapse component is given below:

See online demo and code

Detailed tutorial: Bootstrap 5 accordion

Reference: https://getbootstrap.com/docs/5.0/components/collapse/