Bootstrap 5 List group Events

Last Updated : 14 Dec, 2022

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">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/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">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>