Bootstrap 5 List group getInstance() Method

Last Updated : 09 Feb, 2023

Bootstrap 5 List Group getInstance() method is used to get the instance of the tab attached with the DOM element passes as the parameter. This method returns the instance that can later be used to perform different operations like triggering other methods on the Tab pane.

Syntax:

const element = document.querySelector("#listItem-ID");
element.getInstance(element);

Parameters: The list group getInstance() method accepts a DOM element or its selector as the only parameter.

Return Value: This method returns the tab instance of the DOM element passes as the parameter to the caller.

Example 1: In this example, we used the getInstance() method of the list group to get the instance of a tab pane and then trigger its show() method.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Bootstrap 5 List Group getInstance() Method</title>
 
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
        rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
</head>
 
<body>
    <div class="container text-center">
        <div class="text-center">
            <h1 class="text-success">GeeksforGeeks</h1>
            <strong>
                Bootstrap 5 List Group getInstance() Method
            </strong>
        </div>
 
        <div class="row my-4">
            <div class="col-4 offset-2">
                <div class="list-group" role="tablist">
                    <a id="sdesheet-tab"
                        class="list-group-item 
                        list-group-item-action active" 
                        data-bs-toggle="list"
                        href="#sdesheet" role="tab">
                        SDE Sheet
                    </a>
                    <a id="courses-tab"
                        class="list-group-item 
                        list-group-item-action" 
                        data-bs-toggle="list"
                        href="#courses" role="tab">
                        Courses
                    </a>
                    <a id="practice-tab"
                        class="list-group-item 
                        list-group-item-action" 
                        data-bs-toggle="list"
                        href="#practice" role="tab">
                        Practice
                    </a>
                </div>
            </div>
            <div class="col-4">
                <div class="tab-content">
                    <div class="tab-pane active"
                        id="sdesheet" role="tabpanel">
                        GeeksforGeeks's SDE Sheet is a curated list
                        of Data Structures and Algorithms questions
                        which will help you to prepare for the
                        interviews in big tech companies.
                    </div>
                    <div class="tab-pane" id="courses" role="tabpanel">
                        GeeksforGeeks offers both free and paid courses.
                        Free courses are good for getting the beginner
                        level knowledge or to get comfortable with a
                        technology whereas paid courses offers much
                        in-depth content.
                    </div>
                    <div class="tab-pane" id="practice" role="tabpanel">
                        GeeksforGeeks Practice portal have thousands of
                        question for you to attempt and to enhance your
                        skills. Everyday, there is a Problem of the Day 
                        (POTD) which will earn you geek bits if you solve 
                        that correctly. These geek bits can be used to 
                        redeem exciting prizes.
                    </div>
                </div>
            </div>
        </div>
 
        <button class="btn btn-success mx-auto mt-4"
            onclick="getInstanceAndShow()">
            getInstance and Show Courses
        </button>
    </div>
 
    <script>
 
        // Create all the tabs
        new bootstrap.Tab('#sdesheet-tab')
        new bootstrap.Tab('#courses-tab')
        new bootstrap.Tab('#practice-tab')
 
        // Function to get Instance and Show
        function getInstanceAndShow() {
            var myTab = bootstrap.Tab.getInstance("#courses-tab");
            myTab.show();
        }
    </script>
</body>
 
</html>

Output:

Example 2: In this example, we used the getInstance() method to get the instance of the practice tab and triggered the dispose() method to destroy the instance, so that the tab cannot be controlled programmatically.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Bootstrap 5 List Group getInstance() Method</title>
 
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
        rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
</head>
 
<body>
    <div class="container text-center">
        <div class="text-center">
            <h1 class="text-success">GeeksforGeeks</h1>
            <strong>
                Bootstrap 5 List Group getInstance() Method
            </strong>
        </div>
 
        <div class="row my-4">
            <div class="col-4 offset-2">
                <div class="list-group" role="tablist">
                    <a
                        id="sdesheet-tab"
                        class="list-group-item 
                        list-group-item-action active" 
                        data-bs-toggle="list"
                        href="#sdesheet" role="tab">
                        SDE Sheet
                    </a>
                    <a
                        id="courses-tab"
                        class="list-group-item 
                        list-group-item-action" 
                        data-bs-toggle="list"
                        href="#courses" role="tab">
                        Courses
                    </a>
                    <a
                        id="practice-tab"
                        class="list-group-item 
                        list-group-item-action" 
                        data-bs-toggle="list"
                        href="#practice" role="tab">
                        Practice
                    </a>
                </div>
            </div>
            <div class="col-4">
                <div class="tab-content">
                    <div class="tab-pane active"
                        id="sdesheet" role="tabpanel">
                        GeeksforGeeks's SDE Sheet is a curated list
                        of Data Structures and Algorithms questions
                        which will help you to prepare for the
                        interviews in big tech companies.
                    </div>
                    <div class="tab-pane" id="courses" role="tabpanel">
                        GeeksforGeeks offers both free and paid courses.
                        Free courses are good for getting the beginner
                        level knowledge or to get comfortable with a
                        technology whereas paid courses offers much
                        in-depth content.
                    </div>
                    <div class="tab-pane" id="practice" role="tabpanel">
                        GeeksforGeeks Practice portal have thousands of
                        question for you to attempt and to enhance your
                        skills. Everyday, there is a Problem of the Day 
                        (POTD) which will earn you geek bits if you solve 
                        that correctly. These geek bits can be used to 
                        redeem exciting prizes.
                    </div>
                </div>
            </div>
        </div>
 
        <button
            class="btn btn-success mx-auto mt-4"
            onclick="getInstanceAndShow()">
            getInstance and Show Practice
        </button>
 
        <button
            class="btn btn-danger mx-auto mt-4"
            onclick="getInstanceAndDispose()">
            getInstance and Dispose Practice
        </button>
    </div>
 
    <script>
 
        // Create all the tabs
        new bootstrap.Tab('#sdesheet-tab')
        new bootstrap.Tab('#courses-tab')
        new bootstrap.Tab('#practice-tab')
 
        // Function to get Instance and Dispose
        function getInstanceAndDispose() {
            var practiceTab = bootstrap.Tab.getInstance("#practice-tab");
            practiceTab.dispose();
        }
 
        // Function to get Instance and Show
        function getInstanceAndShow() {
            var practiceTab = bootstrap.Tab.getInstance("#practice-tab");
            practiceTab.show();
        }
    </script>
</body>
</html>