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.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Collapse Usage</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js">
</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.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Collapse Usage</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js">
</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
