Collapse
Toggle the visibility of content across your project with a few classes and attributes.
How it works
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 attribute on a collapse attribute.
Instead, use the class as an independent wrapping element.
Example
Click the buttons below to show and hide another element.
.collapsehides content.collapse.showis applied during transitions.collapsingshow content
Generally, we recommend using a button with the target attribute.
While not recommended from a semantic point of view, you can also use a link with the href attribute (and a role="button").
In both cases, the toggle="collapse" attribute is required.
Horizontal
The collapse plugin also supports horizontal collapsing.
Multiple targets
A <Button> or <b-a> can show and hide multiple elements by referencing them with a selector in its href or target attribute.
Multiple <Button> or <b-a> can show and hide an element if they each reference it with their href or target attribute
Methods
| Method | Description |
|---|---|
toggle | Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden |
show | Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown |
hide | Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden |