Bootstrap 5 Collapse multiple targets can be used to show or hide multiple elements by assigning them a common group and using a single <button> or <a> tag to hide/show them. We can achieve this by assigning the common class in the data-bs-target attribute of the button or link.
Bootstrap 5 Collapse Multiple TargetsClass: No special classes or attributes are used for this, the target is just needed to be taken care of.
Syntax:
<button class="btn" type="button" data-bs-toggle="collapse"
data-bs-target=".element-Selector">
....
</button>
<div class="collapse element-selector">
. . .
</div>
<p class="collapse element-selector">
. . .
</p>
Example 1: The code below demonstrates how we can target multiple collapse targets by using data attributes:
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<h1 class="m-4 text-success">GeeksforGeeks</h1>
<h4 class="ms-4">Bootstrap 5 Collapse Multiple Targets</h4>
<div class="container d-flex flex-row m-4">
<p>
<a class="btn btn-success"
data-bs-toggle="collapse"
href="#collapseExample_1"
role="button">
Toggle first
element
</a>
<a class="btn btn-success"
data-bs-toggle="collapse"
href="#collapseExample_2"
role="button">
Toggle second element
</a>
</p>
</div>
<div class="container">
<div class="bg-light text-center collapse m-col fade"
id="collapseExample_1">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220512131412/Student-Chapter-Article-Banner.png"
width="450"
height="260">
</div>
<div class="collapse m-col"
id="collapseExample_2">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-3">
<div class="container">
<a class="navbar-brand" href="#">
<img src=
"https://media.geeksforgeeks.org/auth/profile/8ceu3jpotjla4m5wpbm7"
width="30"
height="30"></a>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active"
aria-current="page"
href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<button class="btn btn-danger m-4"
type="button"
data-bs-toggle="collapse"
data-bs-target=".m-col">
Toggle both elements
</button>
</body>
</html>
Output:
Example 2: The code below demonstrates how we can open multiple accordion tabs using one accordion tab button:
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body class="bg-light">
<h1 class="mt-3 text-success">GeeksforGeeks</h1>
<h4>Bootstrap 5 Collapse Multiple targets</h4>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne">
DSA
</button>
</h2>
<div id="collapseOne"
class="accordion-collapse collapse"
data-bs-parent="#accordionExample">
<div class="accordion-body">
A data structure is defined as a particular way of storing and
organizing data in our devices to use the data efficiently and
effectively.The main idea behind using data structures is to
minimize the time and space complexities.An efficient data
structure takes minimum memory space and requires minimum time
to execute the data.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo">
JavaScript
</button>
</h2>
<div id="collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
JavaScript is a lightweight, cross-platform, and interpreted
compiled programming language which is also known as the
scripting language for webpages.It is well-known for the
development of web pages, many non-browser environments also use it.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target=".accordion-collapse">
This accordion Button toggles the two accordion tabs above.
</button>
</h2>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/collapse/#multiple-targets
