Bootstrap 5 List group Events
Last Updated :
26 Jul, 2024
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:
- hide.bs.tab: It is called on the last active tab
- show.bs.tab: It is called on the new active tab
- hidden.bs.tab: It is called on the last active tab
- 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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body class="m-2">
<h1 class="text-success">GeeksforGeeks</h1>
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab"
role="tablist">
<a class="list-group-item
list-group-item-action
active" id="list-home-list"
data-bs-toggle="list"
href="#list-home" role="tab"
aria-controls="list-home">
Home
</a>
<a class="list-group-item list-group-item-action"
id="list-profile-list" data-bs-toggle="list"
href="#list-profile" role="tab"
aria-controls="list-profile">
About
</a>
<a class="list-group-item list-group-item-action"
id="list-messages-list" data-bs-toggle="list"
href="#list-messages" role="tab"
aria-controls="list-messages">
Contact
</a>
<a class="list-group-item list-group-item-action"
id="list-settings-list" data-bs-toggle="list"
href="#list-settings" role="tab"
aria-controls="list-settings">
Settings
</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active"
id="list-home" role="tabpanel"
aria-labelledby="list-home-list">
Home content
</div>
<div class="tab-pane fade" id="list-profile"
role="tabpanel"
aria-labelledby="list-profile-list">
About content
</div>
<div class="tab-pane fade" id="list-messages"
role="tabpanel"
aria-labelledby="list-messages-list">
Contact content
</div>
<div class="tab-pane fade" id="list-settings"
role="tabpanel"
aria-labelledby="list-settings-list">
Settings content
</div>
</div>
</div>
</div>
<script>
const btn = document.getElementById('btn')
const listGroup1 =
document.getElementsByClassName('list-group-item')[0]
const listGroup2 =
document.getElementsByClassName('list-group-item')[1]
const listGroup3 =
document.getElementsByClassName('list-group-item')[2]
const listGroup4 =
document.getElementsByClassName('list-group-item')[3]
listGroup1.addEventListener('show.bs.tab', () => {
console.log('Home tab visible');
})
listGroup2.addEventListener('show.bs.tab', () => {
console.log('About tab visible');
})
listGroup3.addEventListener('show.bs.tab', () => {
console.log('Contact tab visible');
})
listGroup4.addEventListener('show.bs.tab', () => {
console.log('Settings tab visible');
})
</script>
</body>
</html>
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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body class="m-2">
<h1 class="text-success">GeeksforGeeks</h1>
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action
active"
id="list-home-list" data-bs-toggle="list"
href="#list-home" role="tab"
aria-controls="list-home">
Home
</a>
<a class="list-group-item list-group-item-action"
id="list-profile-list" data-bs-toggle="list"
href="#list-profile" role="tab"
aria-controls="list-profile">
About
</a>
<a class="list-group-item list-group-item-action"
id="list-messages-list" data-bs-toggle="list"
href="#list-messages" role="tab"
aria-controls="list-messages">
Contact
</a>
<a class="list-group-item list-group-item-action"
id="list-settings-list" data-bs-toggle="list"
href="#list-settings" role="tab"
aria-controls="list-settings">
Settings
</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home"
role="tabpanel" aria-labelledby="list-home-list">
Home content
</div>
<div class="tab-pane fade" id="list-profile"
role="tabpanel"
aria-labelledby="list-profile-list">
About content
</div>
<div class="tab-pane fade" id="list-messages"
role="tabpanel" aria-labelledby="list-messages-list">
Contact content
</div>
<div class="tab-pane fade" id="list-settings"
role="tabpanel" aria-labelledby="list-settings-list">
Settings content
</div>
</div>
</div>
</div>
<script>
const btn = document.getElementById('btn')
const listGroup1 =
document.getElementsByClassName('list-group-item')[0]
const listGroup2 =
document.getElementsByClassName('list-group-item')[1]
const listGroup3 =
document.getElementsByClassName('list-group-item')[2]
const listGroup4 =
document.getElementsByClassName('list-group-item')[3]
listGroup1.addEventListener('hidden.bs.tab', () => {
console.log('Home tab hidden');
})
listGroup2.addEventListener('hidden.bs.tab', () => {
console.log('About tab hidden');
})
listGroup3.addEventListener('hidden.bs.tab', () => {
console.log('Contact tab hidden');
})
listGroup4.addEventListener('hidden.bs.tab', () => {
console.log('Settings tab hidden');
})
</script>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/list-group/#events
Similar Reads
Bootstrap 5 List group Active items Bootstrap 5 provides the List Group Active feature in which items are stored in form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Active feature is used to indicate the currently active selection. List group Active items classes: .ac
2 min read
Bootstrap 5 List group Disabled items Bootstrap 5 provides the List Group disabled items feature in which items are stored in form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Disabled items feature is used to indicate the item is currently disabled. List Group Disabled
2 min read
Bootstrap 5 List group Links and buttons Bootstrap 5 provides the List Group Links and Buttons items feature in which items are actionable and stored in form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Links and Buttons items feature is used to indicate the item is current
2 min read
Bootstrap 5 List group Flush Bootstrap 5 provides the List Group Flush feature in which items are stored in the form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Flush feature is used to remove borders and rounded corners around the items on the list. List group
2 min read
Bootstrap 5 List group Numbered Bootstrap 5 List Group Numbered is one of the capabilities offered by List Group in Bootstrap 5, which is used to keep items in the form of a list and display them sequentially through the use of numbers. List Group Numbered Classes: list-group-item: This class is used to indicate and add the items
2 min read
Bootstrap 5 List group Horizontal Bootstrap 5 List group Horizontal facilitates to modification & alignment of the structure of the list group items from vertical to horizontal, across all breakpoints, by implementing the .list-group-horizontal class. In order to create a list group horizontal that starts with the min-width of t
2 min read
Bootstrap 5 List group Contextual classes Bootstrap 5 List group Contextual classes are used to style list-group-items with different backgrounds and colors. Bootstrap 5 List group Contextual Used Classes: list-group-item-primary: For blue color styling of the list itemlist-group-item-success: For green color styling of the list itemlist-gr
2 min read
Bootstrap 5 List group with badges Bootstrap 5 List group with badges can be used to add badges to the list group item to indicate the count of objects. List group With badges Classes: No special classes are used in the List group With badges. You can customize the list using .badge classes and style them with flex. Bootstrap 5 List
2 min read
Bootstrap 5 List group Custom content Bootstrap 5 List Group Custom content allows us to use HTML inside the list, here, the term "Custom Content" refers to HTML, therefore any HTML elements can be used inside, including anchor tags, paragraph tags, divs, photos, and many more.Bootstrap 5 List Group Custom content Classes: There is no p
2 min read
Bootstrap 5 List group Checkboxes and radios Bootstrap 5 List group Checkboxes and radios use .list-group and .list-group-item classes to create a list of items. The .list-group class is used with <ul> element and the .list-group-item is used with <li> element. Then create the checkbox and radios in the input element using the type
2 min read