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.
- CSS | border-collapse Property
- Collapse multiple Columns in Pandas
- Include Bootstrap in AngularJS using ng-bootstrap
- What's new in Bootstrap v4.3 ?
- Bootstrap 4 | Tooltip
- Bootstrap 4 | Navs
- Bootstrap 4 | Popover
- Bootstrap 4 | Navigation Bar
- Bootstrap 4 | Tables
- Bootstrap 4 | Colors
- Bootstrap 4 | Buttons
- Bootstrap 4 | Spinners
- Bootstrap | Scrollspy
- Bootstrap | Tables | Set-2
- Bootstrap | Tables | Set-1
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.