Bootstrap 5 List group show() Method

Last Updated : 16 Jan, 2023

Bootstrap 5 List Group shows a series of content to the user. The show() method of the list group selects the given item and shows its corresponding pane and the previously selected list item becomes unselected and the pane of the previously selected item’s pane becomes hidden. The show() method returns to the caller before the actual list item is selected on the front end.

Syntax:

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

Parameters: The list group show() method does not accept any parameters.

Return Value: This method does not return anything to the caller.

Example 1: This is a basic example illustrating the use of the show() method to make a tab visible.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Bootstrap 5 List group show() Method</title> 
  
    <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> 
    <div class="container text-center"> 
        <div class="text-center"> 
            <h1 class="text-success">GeeksforGeeks</h1> 
            <strong>Bootstrap 5 List Group show() Method</strong> 
        </div> 
  
        <div class="row my-4"> 
            <div class="col-4 offset-2"> 
                <div class="list-group" role="tablist"> 
                    <a id="dsa-tab" class="list-group-item  
                        list-group-item-action active"  
                        data-bs-toggle="list" href="#dsa" 
                        role="tab"> 
                        DSA 
                    </a> 
                    <a id="cpp-tab" class="list-group-item  
                            list-group-item-action"  
                            data-bs-toggle="list" href="#cpp" 
                            role="tab"> 
                        C++ 
                    </a> 
                    <a id="java-tab" class="list-group-item  
                            list-group-item-action"  
                            data-bs-toggle="list" href="#java" 
                            role="tab"> 
                        Java 
                    </a> 
                </div> 
            </div> 
            <div class="col-4"> 
                <div class="tab-content"> 
                    <div class="tab-pane active" 
                        id="dsa" role="tabpanel"> 
                        The term DSA stands for Data Structures  
                        and Algorithms. As the name itself suggests,  
                        it is a combination of two separate yet  
                        interrelated topics - Data Structure and  
                        Algorithms. 
                    </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. C++ runs on  
                        lots of platforms like Windows, Linux, Unix, 
                        Mac etc. 
                    </div> 
                      
                    <div class="tab-pane" id="java" role="tabpanel"> 
                        Java is one of the most popular and widely 
                        used programming languages. Java is Object  
                        Oriented. However, it is not considered as  
                        pure object-oriented as it provides support  
                        for primitive data types (like int, char, etc) 
                    </div> 
                </div> 
            </div> 
        </div> 
  
        <button class="btn btn-success mx-auto mt-4" 
            onclick="show()"> 
            Show Java 
        </button> 
    </div> 
  
    <script> 
  
        // Function to get Instance and Show 
        function show() { 
            bootstrap.Tab.getOrCreateInstance("#java-tab").show(); 
        } 
    </script> 
</body> 
  
</html>

Output:

Example 2: In this example, we used the JavaScript setInterval() and setTimeout() functions along with the popover show() method to periodically show each of the tabs.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Bootstrap 5 List group show() Method</title> 
  
    <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> 
    <div class="container text-center"> 
        <div class="text-center"> 
            <h1 class="text-success"> 
                GeeksforGeeks 
            </h1> 
  
            <strong> 
                Bootstrap 5 List Group show() Method 
            </strong> 
        </div> 
  
        <div class="row my-4"> 
            <div class="col-4 offset-2"> 
                <div class="list-group" role="tablist"> 
                    <a id="dsa-tab" class="list-group-item  
                            list-group-item-action active"  
                            data-bs-toggle="list" href="#dsa" 
                            role="tab"> 
                        DSA 
                    </a> 
                    <a id="cpp-tab" class="list-group-item  
                            list-group-item-action"  
                            data-bs-toggle="list" href="#cpp" 
                            role="tab"> 
                        C++ 
                    </a> 
                    <a id="java-tab" class="list-group-item  
                            list-group-item-action"  
                            data-bs-toggle="list" href="#java" 
                            role="tab"> 
                        Java 
                    </a> 
                </div> 
            </div> 
            <div class="col-4"> 
                <div class="tab-content"> 
                    <div class="tab-pane active" 
                        id="dsa" role="tabpanel"> 
                        The term DSA stands for Data Structures  
                        and Algorithms. As the name itself suggests,  
                        it is a combination of two separate yet  
                        interrelated topics - Data Structure and  
                        Algorithms. 
                    </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. C++ runs on  
                        lots of platforms like Windows, Linux, Unix, 
                        Mac etc. 
                    </div> 
                    <div class="tab-pane" id="java" role="tabpanel"> 
                        Java is one of the most popular and widely  
                        used programming languages. Java is Object  
                        Oriented. However, it is not considered 
                        as pure object-oriented as it provides  
                        support for primitive data types (like int,  
                        char, etc) 
                    </div> 
                </div> 
            </div> 
        </div> 
  
        <button class="btn btn-success mx-auto mt-4" 
            onclick="showLoop()"> 
            Show All in Loop 
        </button> 
    </div> 
  
    <script> 
  
        // Function to Show Loop 
        function showLoop() { 
            let dsa = bootstrap.Tab.getOrCreateInstance("#dsa-tab"); 
            let cpp = bootstrap.Tab.getOrCreateInstance("#cpp-tab"); 
            let java = bootstrap.Tab.getOrCreateInstance("#java-tab"); 
  
            setInterval(() => { 
                dsa.show(); 
                setTimeout(() => { 
                    cpp.show(); 
                }, 1000); 
                setTimeout(() => { 
                    java.show(); 
                }, 2000); 
            }, 3000); 
        } 
    </script> 
</body> 
  
</html>