Bootstrap 5 Collapse Events

In this article, we will learn about the Bootstrap 5 Collapse Events fired when interacting with the Bootstrap 5 Collapse element. Bootstrap 5 Collapse component is useful for toggling the visibility of a particular content on a webpage. 

Bootstrap 5 Collapse Events

• show.bs.collapse: It is fired as soon as the show() method of the instance is called. 
• shown.bs.collapse: It is fired when the collapse element is completely visible after all the CSS transitions are done.
• hide.bs.collapse: It is fired as soon as the hide() method of the instance is called. 
• hidden.bs.collapse: It is fired when the collapse element is completely hidden after all the CSS transitions are done.

Syntax:

let myCollapsibleEl = document.getElementById('myCollapsible')
myCollapsibleEl.addEventListener('collapse_event', function () {
 ....
})

Let us understand more about this using some examples below.

Example 1: In this example, we will listen for the collapse events, show.bs.collapse, and shown.bs.collapse, gets fired when a collapse is toggled visible.

Output:

Example 2: In this example, we will listen for the collapse events, hide.bs.collapse, and hidden.bs.collapse, which gets fired when a collapse is closed.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/collapse/#events