Bootstrap 5 Collapse

Bootstrap 5 provides a collapse component that allows you to hide and show content with a click of a button or a link. The collapse component is useful when you want to hide and show a large amount of content.

<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">Click</button>

<div id="demo" class="collapse">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eros augue.
</div>

• The class .collapse is added to the collapsible element.
• The div element with the id="demo" will be hidden by default.
• data-bs-toggle="collapse" controls the visibility of the collapsible content, add the attribute to a button or a link element.
• Add data-bs-target="#id" attribute to connect the button or link with the collapsible content.

In <a> elements, use href attribute instead of the data-bs-target attribute.

<a href="#demo" data-bs-toggle="collapse">Click</a>

<div id="demo" class="collapse">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eros augue.
</div>

Use .show class to show the content by default.

<a href="#demo" data-bs-toggle="collapse">Click</a>

<div id="demo" class="collapse show">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eros augue.
</div>