Bootstrap Collapse is a component that enables you to show and hide content on your website by clicking on a button or link. It provides a simple and effective way to organize content and make it more easily accessible to users.
Here's the basic syntax for Bootstrap Collapse:
<button data-toggle="collapse" data-target="#example">Click to toggle</button>
<div id="example" class="collapse">This content will appear or disappear when the button is clicked.</div>
Here's an example of how to create a Bootstrap Collapse component.
<p class="d-inline-flex gap-1">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false"
aria-controls="collapseExample">
Click to toggle content
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
This content will appear or disappear when the button is clicked.
</div>
</div>
<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
<p class="d-inline-flex gap-1">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
In the code above, we use the following classes:
btn: This is the base class for Bootstrap buttons.btn-primary: This sets the color of the button to blue.collapse: This class indicates that the content will be collapsed by default.card: This is a class that formats the content as a card.card-body: This is the class that applies the background color and spacing to the card section.We also use the following data attributes:
data-toggle="collapse": This data attribute indicates that the content will toggle when the button is clicked.data-target="#collapseExample": This data attribute targets the div with the id of collapseExample.Bootstrap Collapse can be used to create various components such as navigation menus, accordions, and more. It allows you to easily organize and display content on your website in a way that is more user-friendly.
Bootstrap Collapse is a powerful component for showcasing content on your website. With its easy-to-use syntax and customization options, it is a great tool for creating navigation menus, accordions, and much more.