Bootstrap 5 List group show() Method
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" >w3wiki</ 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" > w3wiki </ 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
Contact Us