Several changes can be added to classes via button click for Collapse content. For hiding the contents, you can include class .collapse hides content to hide the contents. If you need to apply any transitions, then additionally include .collapsing functionality. Also, the .collapse.show attribute is used for expanding the contents.
<p> <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> A clickable button using data-bs-target </button> </p> <div class="collapse" id="collapseExample"> <div class="card card-body"> An example for collapse which is added into the button. </div> </div>
There are two options available to add collapse one is using data-bs-target under a button and the another is to include in the anchor tag. But it is recommended to use the data-bs-target attribute on the button. Even you can add multiple targets within the class like button tags or anchor tags to hide and show the contents.