In Bootstrap 5, the collapse component allows you to create collapsible content that can be toggled to show or hide. This is useful for displaying long blocks of content or menus that you want to be expandable. Here’s how you can use the collapse component in Bootstrap 5:
- Basic Collapse:
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Toggle Collapse
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
This is the content that can be collapsed.
</div>
</div>- Accordion Style:
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Item 1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
Content for item 1.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Item 2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
Content for item 2.
</div>
</div>
</div>
</div>- Multiple Collapsible Items:
<div class="collapse multi-collapse" id="multiCollapseExample">
<div class="card card-body">
Content for collapse item 1.
</div>
</div>
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Content for collapse item 2.
</div>
</div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample" aria-expanded="false" aria-controls="multiCollapseExample">Toggle Collapse 1</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle Collapse 2</button>The first example shows a basic collapsible content block that can be toggled using a button. The second example demonstrates an accordion-style collapse, where only one item can be expanded at a time. The third example shows multiple collapsible items that can be toggled independently.
You can customize the collapse component by adding additional classes, styles, or JavaScript events to enhance its behavior and appearance.
Feel free to use the collapse component to create expandable and collapsible content in your Bootstrap 5 project. For more details and additional options related to the collapse component, refer to the official Bootstrap documentation.