Bootstrap 5 List group Events

In this article, we will learn about the Bootstrap 5 List Group events fired when interacting with the Bootstrap 5 List Group. 

For example, these events are fired when a tab is clicked and made active and the previous tab is made inactive. 

Bootstrap 5 List Group component is useful for displaying a series of content, either vertically or horizontally. They can be used for different menu items or a list of content on the webpage.

Bootstrap 5 List Group Events

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

When a new tab is clicked and made active, the above events fire in the following order:

1. hide.bs.tab: It is called on the last active tab
2. show.bs.tab: It is called on the new active tab
3. hidden.bs.tab: It is called on the last active tab
4. shown.bs.tab: It is called on the new active tab

Syntax:

listGroupEl.addEventListener(list_group_event, callbackFunction);

Let us understand more about this using some examples below:

Example 1: In this example, we will listen for the list group events that get fired when a list group gets active or visible. We only look for show.bs.tab event here. 

Output:

Example 2: In this example, we will listen for the list group events that get fired when a list group gets hidden. We only look for hidden.bs.tab events here.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/list-group/#events