The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are
used as
triggers that are mapped to specific elements you toggle. Collapsing an element will
animate the
height from its current value to 0. Given how CSS handles animations, you cannot use
padding on
a .collapse element. Instead, use the class as an independent wrapping
element.
Learn more about this component on bootstrap's official documentation.
Basic example
Click the buttons below to show or hide elements using class changes:
.collapsehides content.collapsingis applied during transitions.collapse.showreveals content
You can use a link with the href attribute or a button with
the data-bs-target attribute. In both cases,
data-bs-toggle="collapse" is required.
Multiple Targets
A <button> or <a> can toggle
multiple elements by
referencing them with a selector in its href or
data-bs-target attribute.
Multiple <button> or <a>
elements can control the same element if
they each reference it with href or
data-bs-target.
Accordion example
Add navigation to a card’s header (or body) using Bootstrap's
built-in nav components. You can show or hide elements when a
.collapse state changes using the
.collapse-reveal and .collapse-hidden
classes.
Ensure that the .collapse-* classes are placed
inside the element with data-bs-toggle="collapse"
or adjacent to it for proper functionality.