Bootstrap 5 List group show() Method Last Updated : 26 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/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> Output:Reference: https://getbootstrap.com/docs/5.0/components/list-group/#show Comment More infoAdvertise with us Next Article Bootstrap 5 List group Disabled items W writer01 Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads Bootstrap 5 List group Active items Bootstrap 5 provides the List Group Active feature in which items are stored in form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Active feature is used to indicate the currently active selection. List group Active items classes: .ac 2 min read Bootstrap 5 List group Disabled items Bootstrap 5 provides the List Group disabled items feature in which items are stored in form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Disabled items feature is used to indicate the item is currently disabled. List Group Disabled 2 min read Bootstrap 5 List group Links and buttons Bootstrap 5 provides the List Group Links and Buttons items feature in which items are actionable and stored in form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Links and Buttons items feature is used to indicate the item is current 2 min read Bootstrap 5 List group Flush Bootstrap 5 provides the List Group Flush feature in which items are stored in the form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Flush feature is used to remove borders and rounded corners around the items on the list. List group 2 min read Bootstrap 5 List group Numbered Bootstrap 5 List Group Numbered is one of the capabilities offered by List Group in Bootstrap 5, which is used to keep items in the form of a list and display them sequentially through the use of numbers. List Group Numbered Classes: list-group-item: This class is used to indicate and add the items 2 min read Bootstrap 5 List group Horizontal Bootstrap 5 List group Horizontal facilitates to modification & alignment of the structure of the list group items from vertical to horizontal, across all breakpoints, by implementing the .list-group-horizontal class. In order to create a list group horizontal that starts with the min-width of t 2 min read Bootstrap 5 List group Contextual classes Bootstrap 5 List group Contextual classes are used to style list-group-items with different backgrounds and colors. Bootstrap 5 List group Contextual Used Classes: list-group-item-primary: For blue color styling of the list itemlist-group-item-success: For green color styling of the list itemlist-gr 2 min read Bootstrap 5 List group with badges Bootstrap 5 List group with badges can be used to add badges to the list group item to indicate the count of objects. List group With badges Classes: No special classes are used in the List group With badges. You can customize the list using .badge classes and style them with flex. Bootstrap 5 List 2 min read Bootstrap 5 List group Custom content Bootstrap 5 List Group Custom content allows us to use HTML inside the list, here, the term "Custom Content" refers to HTML, therefore any HTML elements can be used inside, including anchor tags, paragraph tags, divs, photos, and many more.Bootstrap 5 List Group Custom content Classes: There is no p 2 min read Bootstrap 5 List group Checkboxes and radios Bootstrap 5 List group Checkboxes and radios use .list-group and .list-group-item classes to create a list of items. The .list-group class is used with <ul> element and the .list-group-item is used with <li> element. Then create the checkbox and radios in the input element using the type 2 min read Like