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:
- 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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body class = "m-2" > < h1 class = "text-success" >w3wiki</ 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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body class = "m-2" > < h1 class = "text-success" >w3wiki</ 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
Contact Us