Collapse Component

Lecture 102:- Collapse Component

In Bootstrap, the Collapse component allows you to show and hide content with a toggle button. It can be used to create accordions, dropdowns, or any other component where you want to hide and show content based on user interactions.

Here is an example of how to create a simple Collapse component in Bootstrap:

htmlCopy code

<button class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">  Toggle Button </button> <div class="collapse" id="collapseExample">  <div class="card card-body">    This content will be shown or hidden when the toggle button is clicked.  </div> </div>

In this example, we have a button with the data-toggle and data-target attributes. The data-toggle attribute tells Bootstrap to use the Collapse component, while the data-target attribute specifies the ID of the content that should be shown or hidden.

We also have a div with the collapse class and an ID that matches the data-target attribute of the button. This div contains the content that will be shown or hidden when the toggle button is clicked.

The Collapse component can also be customized with various options and classes. For example, you can add the show class to the collapse div to make the content initially visible, or you can use the data-parent attribute to create an accordion-style Collapse component where only one item can be open at a time.