Bootstrap 5 Dropdowns Events

In this article, we will learn about the Bootstrap 5 Dropdowns events fired when interacting with the Bootstrap 5 dropdown. For example, these events are fired when an off-canvas element is toggled to be visible or hidden.

Bootstrap 5 dropdowns are dropdown overlay menus that can be used to display a list of items or content when triggered with a target element, which is often a button. 

Bootstrap 5 Dropdowns events:

• show.bs.dropdown: It is fired when the show instance method of the dropdown is called.
• shown.bs.dropdown: It is fired when the dropdown is completely visible to the user after all the CSS transitions are done.
• hide.bs.dropdown: It is fired when the hide instance method of the dropdown is called.
• hidden.bs.dropdown: It is fired when the dropdown is completely hidden from the user after all the CSS transitions are done.

Syntax:

dropdownsEl.addEventListener(dropdowns_event, callbackFunction);

Example 1: In this example, we will listen for the dropdown events that get fired when the dropdown is toggled to be visible.

Output:

Example 2: In this example, we will listen for the dropdown events that get fired when the dropdown is toggled to be hidden.

Output:

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