In Bootstrap 5, the Collapse component is used to create collapsible content areas that can be toggled open or closed. This is commonly used to show or hide sections of content, menus, or other elements based on user interaction.

Here's an example of how to create a basic collapse component in Bootstrap 5:

html
<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">
        Some hidden content that will be collapsed and shown when the button is clicked.
    </div>
</div>

In this example, we have a button element with the classes `btn` and `btn-primary`. The `data-bs-toggle="collapse"` attribute tells Bootstrap to toggle the collapse behavior. The `data-bs-target="#collapseExample"` attribute specifies the target element to be collapsed or expanded, which is identified by the `id="collapseExample"` attribute.

The content to be collapsed is placed inside a `<div>` element with the classes `collapse` and the specified `id`. In this example, the collapsible content is wrapped in a card component (`<div class="card card-body">`), but you can use any other HTML element or structure as needed.

When the button is clicked, the collapse component toggles the visibility of the content within the specified target element.

You can customize the appearance and behavior of the collapse component by adding additional classes, modifying the styles, or using JavaScript to handle events and add dynamic functionality.

Bootstrap 5 also provides options for accordion-style collapse components, where only one section can be open at a time. You can refer to the Bootstrap documentation for more details and examples on working with collapse components in Bootstrap 5.

About the Author

Silan Software

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc