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.
<!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.
<!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>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/list-group/#show