Bootstrap 5 List group getOrCreateInstance() Method

Last Updated : 28 Feb, 2023

Bootstrap List group getOrCreateInstance() method is used to obtain the instance of a particular tab of the list Group. This method can work even when the instance is not pre-initialized and this method creates an instance if there isn’t one available.

The List group tab’s instance linked to a DOM element may be obtained using this static function or create one instance.

Syntax:

var tab-element = document
    .getElementById("listGroup-tab-id");
var tooltip-instance = bootstrap.Tooltip
    .getOrCreateInstance(tab-element);

Parameters: This method accepts an argument either an HTML element or its selector.

Return Value: This method returns the current Bootstrap 5 List group Tab instance to the caller. If no instance is yet created, it creates one.

Example 1: This example demonstrates how to implement the getOrCreateInstance() Method with the show() method. Here one tab’s instance is created with the getOrCreateInstance() Method but the second tab’s instance is pre-initialized.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"> 
    </script> 
</head> 
  
<body class="m-2"> 
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1> 
    <h3> 
        Bootstrap 5 List 
        getOrCreateInstance() Method 
    </h3> 
    <div role="tabpanel"> 
        <div class="list-group m-5" 
            id="myList" role="tablist"> 
            <a class="list-group-item  
                      list-group-item-action active"  
                data-bs-toggle="list" 
                href="#ds" role="tab"> 
                Data Structures 
            </a> 
            <a class="list-group-item  
                      list-group-item-action"  
                data-bs-toggle="list" 
                href="#algo" role="tab"> 
                Algorithms 
            </a> 
            <a class="list-group-item  
                      list-group-item-action"  
                data-bs-toggle="list" 
                href="#bs" role="tab"> 
                Bootstrap 
            </a> 
            <a class="list-group-item  
                      list-group-item-action"  
                data-bs-toggle="list" 
                href="#cpp" role="tab"> 
                C++ 
            </a> 
        </div> 
        <div class="tab-content m-5 p-3 bg-light"> 
            <div class="tab-pane active" 
                id="ds" role="tabpanel"> 
                A data structure is a group of data  
                elements that provides the easiest  
                way to store and perform different  
                actions on the data of the computer.  
                A data structure is a particular way  
                of organizing data in a computer so  
                that it can be used effectively. 
            </div> 
  
            <div class="tab-pane" id="algo" 
                role="tabpanel"> 
                The word Algorithm means ” A set of  
                finite rules or instructions to be  
                followed in calculations or other  
                problem-solving operations ” Or ”  
                A procedure for solving a mathematical  
                problem in a finite number of steps  
                that frequently involves recursive  
                operations” 
            </div> 
  
            <div class="tab-pane" id="bs" 
                role="tabpanel"> 
                Bootstrap is a free and open-source  
                collection of CSS and JavaScript/ 
                jQuery code used for creating  
                dynamic websites layout and web  
                applications. 
            </div> 
  
            <div class="tab-pane" id="cpp" 
                role="tabpanel"> 
                C++ is a general-purpose programming  
                language and is widely used nowadays  
                for competitive programming. It has  
                imperative, object-oriented and  
                generic programming features. 
            </div> 
        </div> 
    </div> 
  
    <br> 
    <div class="container d-flex  
                flex-column w-50 text-center"> 
        <button class="btn btn-danger m-2" 
            id="showDSBtn"> 
            Create Or Get instance, and 
            Show Data Structures Tab 
        </button> 
        <button class="btn btn-danger m-2" 
            id="showBSBtn"> 
            Create Or Get instance, and 
            Show Bootstrap Tab 
        </button> 
    </div> 
  
    <script> 
        var dsEl = 
            document.getElementsByClassName( 
                'list-group-item')[0]; 
        var dsElTab = new bootstrap.Tab(dsEl) 
  
        var bsEl = 
            document.getElementsByClassName( 
                'list-group-item')[2]; 
        var bsElTab = new bootstrap.Tab(bsEl) 
  
        var sDSBtn = document.getElementById('showDSBtn') 
        var sBSBtn = document.getElementById('showBSBtn') 
  
        sDSBtn.addEventListener('click', function () { 
  
            // Creating a new Instance for DS Tab 
            var dsInstance = 
                bootstrap.Tab.getOrCreateInstance(dsEl); 
            dsInstance.show() 
        }) 
  
        sBSBtn.addEventListener('click', function () { 
            var bsInstance = 
                bootstrap.Tab.getOrCreateInstance(bsEl); 
            bsElTab.show() 
        }) 
    </script> 
</body> 
  
</html> 

Output:

Example 2: This example demonstrates how to implement the getOrCreateInstance() Method with the dispose() method. Here one tab’s instance is pre-initialized but the second tab’s instance gets created with the getOrCreateInstance() Method.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"> 
    </script> 
</head> 
  
<body class="m-2"> 
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1> 
    <h3> 
        Bootstrap 5 List 
        getOrCreateInstance() 
        Method 
    </h3> 
    <div role="tabpanel"> 
        <div class="list-group m-5"
            id="myList" role="tablist"> 
            <a class="list-group-item  
                      list-group-item-action active"  
                data-bs-toggle="list" 
                href="#ds" role="tab"> 
                Data Structures 
            </a> 
            <a class="list-group-item  
                      list-group-item-action"  
                data-bs-toggle="list" 
                href="#algo" role="tab"> 
                Algorithms 
            </a> 
            <a class="list-group-item  
                      list-group-item-action"  
                data-bs-toggle="list" 
                href="#bs" role="tab"> 
                Bootstrap 
            </a> 
            <a class="list-group-item  
                      list-group-item-action"  
                data-bs-toggle="list" 
                href="#cpp" role="tab"> 
                C++ 
            </a> 
        </div> 
        <div class="tab-content m-5 p-3 bg-light"> 
            <div class="tab-pane active" 
                id="ds" role="tabpanel"> 
                A data structure is a group of data 
                elements that provides the easiest way 
                to store and perform different actions 
                on the data of the computer. A data 
                structure is a particular way of 
                organizing data in a computer so that 
                it can be used effectively. 
            </div> 
            <div class="tab-pane" id="algo" role="tabpanel"> 
                The word Algorithm means ” A set of finite rules 
                or instructions to be followed in calculations 
                or other problem-solving operations ” Or ” A 
                procedure for solving a mathematical problem 
                in a finite number of steps that frequently 
                involves recursive operations” 
            </div> 
            <div class="tab-pane" id="bs" role="tabpanel"> 
                Bootstrap is a free and open-source collection 
                of CSS and JavaScript/jQuery code used for 
                creating dynamic websites layout and web 
                applications. 
            </div> 
            <div class="tab-pane" id="cpp" role="tabpanel"> 
                C++ is a general-purpose programming language 
                and is widely used nowadays for competitive 
                programming. It has imperative, object-oriented 
                and generic programming features. 
            </div> 
        </div> 
    </div> 
  
    <br> 
    <div class="container d-flex  
                flex-column w-75 text-center"> 
        <button class="btn btn-danger m-2" id="disposeAlgoBtn"> 
            Create Or Get instance, and 
            Dispose Algo Tab 
        </button> 
        <button class="btn btn-danger m-2" id="disposeCPPBtn"> 
            Create Or Get instance, and 
            Dispose cpp Tab 
        </button> 
    </div> 
  
    <script> 
        const algoEl = document.getElementById('algo'); 
        const algoElTab = new bootstrap.Tab(algoEl) 
  
        const cppEl = document.getElementById('cpp'); 
  
        const disAlgoBtn = 
            document.getElementById('disposeAlgoBtn') 
        const disCPPBtn = 
            document.getElementById('disposeCPPBtn') 
  
        disAlgoBtn.addEventListener('click', function () { 
            var algoInstance = 
                bootstrap.Tab.getOrCreateInstance(algoEl); 
  
            // Instance before disposing  
            console.log(algoInstance); 
            algoInstance.dispose() 
  
            // Instance after disposing  
            console.log(algoInstance); 
        }) 
  
        disCPPBtn.addEventListener('click', function () { 
  
            // Creating a new Instance for CPP Tab 
            var cppInstance = 
                bootstrap.Tab.getOrCreateInstance(cppEl); 
  
            // Instance before disposing  
            console.log(cppInstance); 
            cppInstance.dispose() 
  
            // Instance after disposing  
            console.log(cppInstance); 
        }) 
    </script> 
</body> 
  
</html> 