Bootstrap 5 Collapse can also be controlled by using the data attributes. Set the data-bs-toggle attribute of the element to “collapse” and the data-bs-target to the selector of the collapsible element(s). The collapse class must be added to the collapsible element and if you want to keep the collapsible element open, make sure to add the show class also.
Attributes for Bootstrap 5 Collapse Via Data Attributes:
- data-bs-toggle: This attribute should be set to “collapse” to control the collapsible element.
- data-bs-target: This attribute needs to be set to the selector of the collapsible element(s).
Bootstrap 5 Collapse Via Data Attributes Classes:
- collapse: This class is used to make an element collapsible.
- show: This class is used to set the default state of a collapsible element to open.
Syntax:
<button class="btn"
data-bs-toggle="collapse"
data-bs-target="#gfg">
Toggle Collapse
</button>
<div class="collapse" id="gfg">
...
</div>Example 1: In this example, we used the collapse data attributes and the collapse class to control a collapsible element via data attributes.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
<!-- Bootstrap Javascript --> <script src=
</script>
</head>
<body>
<div class="container">
<div class="my-4 text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Bootstrap 5 Collapse Via Data Attributes</strong>
</div>
<div class="d-flex flex-column
justify-content-center w-75 mx-auto">
<button class="btn btn-success" data-bs-toggle="collapse" data-bs-target="#myCollapse">
Toggle Collapse
</button>
<div class="collapse mt-4 border border-dark p-3" id="myCollapse">
<p>
GeeksforGeeks is a computer science portal for geeks.
Here you can read thousands of well-written articles
on topics like Web Development, Android Development,
WordPress, Linux, Data Structures & Algorithm, etc.
</p>
</div>
</div>
</div>
</body>
</html>
|
Output:
Bootstrap 5 Collapse Via data attributes
Example 2: In this example, we used the collapse data attributes to control multiple collapsible elements, one of which is open by default using the show class.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
<!-- Bootstrap Javascript -->
<script src=
</script>
</head>
<body>
<div class="container">
<div class="my-4 text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Bootstrap 5 Collapse Via Data Attributes</strong>
</div>
<div class="d-flex flex-column
justify-content-center w-75 mx-auto">
<button class="btn btn-success" data-bs-toggle="collapse" data-bs-target=".myCollapse">
Toggle Collapse
</button>
<div class="row">
<div class="col">
<div class="collapse show myCollapse mt-4
border border-dark p-3">
<p>
GeeksforGeeks is a computer science portal for geeks.
Here you can read thousands of well-written articles
on topics like Web Development, Android Development,
WordPress, Linux, Data Structures & Algorithm, etc.
</p>
</div>
</div>
<div class="col">
<div class="collapse myCollapse mt-4 border
border-dark p-3">
<p>
GeeksforGeeks also provides you with practice portal
where you can practice you Data Structures and
Algorithms abilities and strenghten them.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Bootstrap 5 Collapse Via data attributes
Reference: https://getbootstrap.com/docs/5.2/components/collapse/#via-data-attributes