Bootstrap - collapse

The collapse component in Bootstrap 5 is a powerful tool for creating toggleable sections of content. This component allows you to hide or display content on user interaction, which is particularly useful for FAQs, accordions, sidebars, and more. In this blog post, we’ll explore the different ways you can use the collapse component in Bootstrap 5 and demonstrate its practical applications.

1. Basic Collapse Example

The most common use of the collapse component is to toggle content visibility. With Bootstrap, you only need a button to trigger the collapse and a div with the .collapse class to hold the collapsible content.

Basic Example:

Toggle Collapse

</button>

This is collapsible content. It is hidden by default and can be revealed by clicking the button above.

</div>

data-bs-toggle="collapse": This attribute is used to specify that the button will toggle a collapsible element.

data-bs-target: This attribute identifies which element will collapse when the button is clicked.

collapse: The class applied to the collapsible content.

2. Collapsing Multiple Elements

You can control the visibility of multiple collapsible elements with a single button.

Example:

Toggle Both

</button>

First collapsible element.

</div>

Second collapsible element.

</div>

In this example, the button toggles two different collapse sections using the class multi-collapse on each collapsible element.

3. Collapse with Accordion

The accordion is a group of collapsible items where only one item is expanded at a time. This is useful for FAQs or menus where you want users to focus on one section at a time.

Example:

Accordion Item #1

</button>

</h2>

This is the first item's accordion body.

</div>

Accordion Item #2

</button>

</h2>

This is the second item's accordion body.

</div>

Here, we have:

The accordion-header where the button to toggle the collapse is placed.

The accordion-collapse class applied to the collapsible content.

The data-bs-parent attribute ensures that only one collapsible item is shown at a time.

4. Collapse with Icons

You can enhance the user experience by adding icons that indicate whether a section is expanded or collapsed.

Example:

Toggle with Icon <span class="collapse-icon">+</span>

</button>

Collapsible content with an icon.

</div>

const collapseIcon = document.querySelector('.collapse-icon');

const iconCollapse = document.getElementById('iconCollapse');

iconCollapse.addEventListener('shown.bs.collapse', () => {

collapseIcon.textContent = '-';

});

iconCollapse.addEventListener('hidden.bs.collapse', () => {

collapseIcon.textContent = '+';

});

</script>

In this example, we use JavaScript to toggle between a plus (+) and minus (-) icon when the collapsible content is expanded or collapsed.

5. Collapse Animation

Bootstrap 5 collapse comes with a smooth animation by default, but you can customize it further if needed.

Example with custom speed:

You can modify the collapse animation duration using CSS.

.collapse {

transition: height 0.8s ease;

}

This will make the collapse transition take 0.8 seconds, slower than the default Bootstrap timing.

6. Collapse in a Sidebar

Using the collapse component for sidebar navigation is a great way to make your UI more dynamic and responsive.

Example of a Collapsible Sidebar:

Toggle Sidebar

</button>

<a href="#" class="list-group-item">About</a>

<a href="#" class="list-group-item">Services</a>

<a href="#" class="list-group-item">Contact</a>

</div>

Here, clicking the toggle button will show or hide the sidebar.

7. Programmatically Toggling Collapse

You can control the collapse component using JavaScript if you want more control over when the content should be displayed or hidden.

Example:

<button id="toggleCollapse" class="btn btn-primary">Toggle Programmatically</button>

Programmatically toggled content.

</div>

const toggleButton = document.getElementById('toggleCollapse');

const programCollapse = new bootstrap.Collapse(document.getElementById('programCollapse'));

toggleButton.addEventListener('click', () => {

programCollapse.toggle();

});

</script>

In this example, we’re manually controlling the collapse action using Bootstrap’s JavaScript API.

Conclusion

Bootstrap 5’s collapse component is an essential tool for creating responsive, interactive layouts. Whether you’re building an accordion, sidebar, or toggling visibility for content sections, the collapse component makes it simple and intuitive to create a dynamic user experience. Its flexibility and easy-to-use API allow for a wide range of applications in modern web design.