Bootstrap 5 List group Methods

Last Updated : 29 Dec, 2022

Bootstrap 5 List Group methods that are used to control the visibility of the List Group component. For example, these methods can be used to show a list of group components, or dispose of them.

Bootstrap 5 List Group Methods:

constructor: It is used to activate a tab element as a Bootstrap 5 List Group element after which we can utilize different methods given by Bootstrap 5 such as show(), dispose(), etc.
show: It is used to activate and select a tab and show the content relevant to it.
dispose: It is used to destroy the element as a Bootstrap 5 list group element.
getInstance: It is a static method that is used to get the list group element associated with the DOM.
getOrCreateInstance: It is a static method that is used to get the list group element associated with the DOM or create a new one if it is not present.

Syntax:

listGroupElement.list_group_method()

Example 1: In this example, we will show different List group tabs using the “show()” method given by the Bootstrap 5 List Group object.

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> 
    <h3>Bootstrap 5 List Group Methods</h3> 
    <div class="row"> 
        <div class="col-4"> 
            <div class="list-group" id="list-tab" role="tablist"> 
                <a class="list-group-item active 
                          list-group-item-action" 
                   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> 
  
    <br> 
    <button id="showAboutBtn">Show About Tab</button> 
    <button id="showSettingsBtn">Show Settings Tab</button> 
  
    <script> 
        const aboutEl = document.getElementsByClassName('list-group-item')[1]; 
        const aboutElTab = new bootstrap.Tab(aboutEl) 
          
        const settingsEl = document.getElementsByClassName('list-group-item')[3]; 
        const settingsElTab = new bootstrap.Tab(settingsEl) 
          
        const aboutBtn = document.getElementById('showAboutBtn') 
        const settingsBtn = document.getElementById('showSettingsBtn') 
          
        aboutBtn.addEventListener('click', function() { 
          aboutElTab.show() 
        }) 
          
        settingsBtn.addEventListener('click', function() { 
          settingsElTab.show() 
        }) 
    </script> 
</body> 
  
</html>

Output:

Bootstrap 5 List group Methods

Example 2: In this example, we will show and dispose of the list group element using the “show()” and “dispose()” methods given by the Bootstrap 5 List Group object. Once we dispose of a list group element, we cannot use any methods given by the Bootstrap 5 List Group object as it gets destroyed in the DOM.

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> 
    <h3>bootstrap 5 List Group Methods</h3> 
    <div class="row"> 
        <div class="col-4"> 
            <div class="list-group" id="list-tab" 
                role="tablist"> 
                <a class="list-group-item active 
                          list-group-item-action"  
                   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> 
      
    <br> 
    <button id="showAboutBtn">Show About Tab</button> 
    <button id="disposeAboutBtn">Dispose About Tab</button> 
  
    <script> 
        const aboutEl =  
        document.getElementsByClassName('list-group-item')[1]; 
        const aboutElTab = new bootstrap.Tab(aboutEl) 
  
        const aboutBtn = document.getElementById('showAboutBtn') 
        const disposeBtn = document.getElementById('disposeAboutBtn') 
  
        aboutBtn.addEventListener('click', function() { 
          aboutElTab.show() 
        }) 
  
        disposeBtn.addEventListener('click', function() { 
            aboutElTab.dispose() 
        }) 
    </script> 
</body> 
  
</html>