Bootstrap 5 Collapse Usage
Last Updated :
22 Dec, 2022
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.
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...