Bootstrap 4 | Collapse
Bootstrap 4 offers different classes for creating collapsible elements. A collapsible element is used to hide or show a large amount of content. When clicking a button it targets a collapsible element, the class transition takes place as follows:
- .collapse: It hides the content.
- .collapsing: It applied during transitions.
- .collapse.show: It shows the content.
Basic Collapsible: The .collapse class indicates a collapsible element i.e. the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add data-toggle = “collapse” attribute to an anchor or a button element. Then add data-target = “#collapseExample” attribute to connect the button with the collapsible content.
Multi Toggle Collapsible: A button or anchor tag can show or hide multiple elements by referencing them with a JQuery selector in its href or data-target attribute. Multiple button or anchor tag can show and hide an element if they can reference it with their href or data-target attribute.
Accordian: The following example shows a simple accordion by extending the panel component. The use of data-parent attribute to makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible items is shown.