Bootstrap 5 Collapse Usage
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 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.
HTML
<!DOCTYPE html><html> <head> <title>Bootstrap 5 Collapse Usage</title> <link href= rel="stylesheet"> <script src= </script></head> <body> <div class="container text-center"> <h1 class="text-success"> GeeksforGeeks </h1> <strong>Bootstrap5 Collapse Usage</strong> <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapse_id"> Click me to show data </button> <div id="collapse_id" class="collapse"> GeeksforGeeks is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles </div> </div></body> </html> |
Output:
Example 2: In this example, we will demonstrate the bootstrap 5 collapse option data-bs-parent.
HTML
<!DOCTYPE html><html> <head> <title>Bootstrap 5 Collapse Usage</title> <link href= rel="stylesheet"> <script src= </script></head> <body> <div class="container"> <center> <h1 class="text-success"> GeeksforGeeks </h1> <strong> Bootstrap5 Collapse Usage </strong> <div id="accordion"> <button class="btn btn-primary" data-bs-toggle="collapse" href="#collapse1"> Collapse element 1 </button> <div id="collapse1" class="collapse show" data-bs-parent="#accordion"> <div> GeeksforGeeks is a Computer Science portal for geeks. </div> </div> <br> <button class="btn btn-primary" data-bs-toggle="collapse" href="#collapse2"> Collapse element 2 </button> <div id="collapse2" class="collapse" data-bs-parent="#accordion"> <div> GeeksforGeeks is a Computer Science portal for geeks. </div> </div> <br> <button class="btn btn-primary" data-bs-toggle="collapse" href="#collapse3"> Collapse element 3 </button> <div id="collapse3" class="collapse" data-bs-parent="#accordion"> <div> GeeksforGeeks is a Computer Science portal for geeks. </div> </div> </div> </center> </div></body> </html> |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/collapse/#usage
Please Login to comment...