Bootstrap Collapse
Bootstrap Collapse
Bootstrap Collapse is a component that allows you to create collapsible content areas that can be expanded or collapsed with a click. It is useful for organizing content and making it easier for users to navigate and find information on a webpage.
To create a basic Bootstrap Collapse, you can use the data-bs-toggle and data-bs-target attributes to specify the content that will be collapsed and the element that will trigger the collapse. Here is an example:
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button that toggles collapse
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
This is the content that will be collapsed
</div>
</div>
In this example, we use a button with the class btn btn-primary to trigger the collapse. The data-bs-toggle attribute is set to collapse, and the data-bs-target attribute is set to the ID of the content that will be collapsed. We also use the aria-expanded and aria-controls attributes to provide additional accessibility information.
When the button is clicked, the content with the ID collapseExample will be collapsed, and the button will change to show the expanded or collapsed state. You can customize the appearance of the collapse by using additional classes, such as show to make the content initially visible, or collapse-inline to collapse inline content.
Bootstrap Collapse also supports multiple targets, allowing you to create complex collapsible content areas with multiple sections that can be expanded or collapsed independently. Here is an example:
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
Button that toggles collapse 1
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
Button that toggles collapse 2
</button>
<div class="collapse" id="collapse1">
<div class="card card-body">
This is the content that will be collapsed 1
</div>
</div>
<div class="collapse" id="collapse2">
<div class="card card-body">
This is the content that will be collapsed 2
</div>
</div>
In this example, we use two buttons to trigger two separate collapsible content areas with IDs collapse1 and collapse2. Each content area is enclosed in its own div element with the class collapse. When a button is clicked, the corresponding content area will be collapsed, and the button will change to show the expanded or collapsed state.
Overall, Bootstrap Collapse is a powerful tool for organizing and displaying content in a collapsible format. It is highly customizable and can be used in a variety of contexts, such as FAQs, product descriptions, or news articles.