Collapse

Collapses offer a quick way to show or hide content. Bootstrap takes care of this by changing the height of the elements to and from 0.

Collapse Classes

• collapse multi-collapse
  • data-bs-toggle="collapse"
  • href or data-bs-target

Try it

The collapse is a simple component, and it's made of two parts. A button with some attributes that link to the collapse and the element with the class of collapse and an ID that the buttons target.

Interestingly, you can use either an anchor tag and use a #partial link to open up the collapse.

Or you can use a button with a data-bs-target with the ID of the collapse to open it up.

In addition, you should use some assistive tags like aria-expanded (if the collapse is expanded and ariaControls that point to the ID of the collapse).

You can target more than one collapse by passing along a class that will match more than one element instead of an ID. In that case, make sure you update the assistive tags properly.