Bootstrap 5 Collapse Options
Last Updated :
21 Dec, 2022
Bootstrap5 collapse options are used to group the collapsible elements under a single parent. It can be done by extending the data attributes with the option name along with “data-” for example data-bs-parent=””.
Bootstrap 5 Collapse Options Attributes:
- data-bs-parent : If we have a multiple collapses under the same parent we can use these data attributes. These attributes close all the other collapsible items when one item is shown.By default, it is false if want to enable these pass data-bs-parent=”parent_id” as shown in example1.
- data-bs-toggle: Toggle is the common attribute that is used to add the togglable feature to our collapse element. By default the data-bs-toggle is true.
Syntax :
<div class="collapse" data-bs-*="id">
Contents...
<div>
The ‘*‘ can be replaced by parent/toggle.
Example 1:In this example, we will demonstrate data-bs-toggle.
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<link href=
rel="stylesheet"/>
<script src=
</script>
</head>
<body>
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h4>
Collapse options
</h4>
<button class="btn btn-primary"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample">
Click me to show the data
</button>
<div class="collapse"
id="collapseExample">
<div class="card card-body">
GeeksforGeeks is a Computer Science portal for geeks.
</div>
</div>
</center>
</body>
</html>
|
Output :
Example 2:In this example we will demonstrate the collapse option “data-bs-parent”.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<div class="container">
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
Collapse Options
</h2>
<div id="accordion">
<button class="btn btn-primary"
data-bs-toggle="collapse"
href="#collapse1">
GeeksforGeeks 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">
GeeksforGeeks 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">
GeeksforGeeks 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/#options
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...