Utilizor
HomeBootstrap 5 BasicsBS5 Collapse

BBS5 Collapse

Learn how to collapse content.

BS5 Collapse

Collapsibles are useful when you want to hide and show large amounts of content.

To create a collapsible, wrap the content in a <div> with class .collapse and a unique ID.

To control the collapsible, add data-bs-toggle="collapse" and data-bs-target="#id" to a button or link.

Accordion

An accordion is a group of stacked collapsibles. Use the .accordion class.

Examples

Basic Collapse

html/css

Simple show/hide content.

<button data-bs-toggle="collapse" data-bs-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
  Lorem ipsum dolor text....
</div>

Accordion

html/css

Stacked collapsible items.

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">
        Lorem ipsum..
      </div>
    </div>
  </div>
</div>

Test Your Knowledge

1. Which attribute specifies the target element to collapse?

2. Which class indicates that an element is hidden by default?