Collapse
Basic Example
Click the buttons below to show and hide another element via class changes:
.collapse
hides content.collapsing
is applied during transitions.collapse.show
shows content
You can use a link with the href
attribute, or a button with the data-target
attribute. In both cases, the data-bs-toggle="collapse"
is required.
Multiple targets
A <button>
or <a>
can show and hide multiple elements by referencing them with a JQuery selector in its href
or data-target
attribute.
Multiple <button>
or <a>
can show and hide an element if they each reference it with their href
or data-target
attribute
Accordion example
Using the card component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use .accordion
as a wrapper.