<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Bootstrap 5 List group show() Method</
title
>
<
link
href
=
rel
=
"stylesheet"
integrity
=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin
=
"anonymous"
>
<
script
src
=
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
>