Bootstrap 5 Collapse Via data Attributes

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.

Output:

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.

Output:

Reference: https://getbootstrap.com/docs/5.2/components/collapse/#via-data-attributes