Bootstrap 5 Collapse is a component used to create collapsible content panels. It allows you to hide and show content on demand. Collapse is useful when you have a lot of content on a page and need to display it in a more organized manner.
You can refer here for further details about Bootstrap 5 Collapse.
Collapse plugin uses few classes to handle the heavy lifting.
.collapse: This class is used to hide the content.
.collapsing: This class is applied during transitions.
.collapse.show: This class is used to show the content.
Collapse Usage:
Using Data attributes: we can implement that by making data-toggle="collapse" and adding data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse.
Using JavaScript: We can implement that using JavaScript by just adding a simple statement manually.
Options: Options can be the elements that can be passed through data attributes or JavaScript. To pass the options via data attributes we need to append the option name with data-bs-. For example data-bs-parent. There are some collapse options like a parent, toggle, etc.
Methods: Methods are to implement different functionalities to over-collapse elements. We have different methods like toggle, options, hide, and dispose of.
Events: There are different events exposed by Bootstrap’s collapse class for hooking into collapse functionality show.bs.collapse, shown.bs.collapse, hide.bs.collapse, hidden.bs.collapse
Example 1: In this example, we will demonstrate bootstrap 5 collapses.
Output:
Example 2: In this example, we will demonstrate the bootstrap 5 collapse option data-bs-parent.
