Bootstrap 5 Collapse Multiple Targets

Bootstrap 5Collapsemultiple 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:

Output:

Example 2: The code below demonstrates how we can open multiple accordion tabs using one accordion tab button:

Output:

Reference:https://getbootstrap.com/docs/5.0/components/collapse/#multiple-targets