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.
<!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 =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
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.
<!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 =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
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