Bootstrap5 list group JavaScript behavior is used to generate tabbable panes of local material by expanding our list group.
Bootstrap 5 List group JavaScript behavior:
- Using data attributes: We can enable the List group by using data attributes without using any javascript code. We need to pass data-bs-toggle = "list" on the element and .list-group-item on the list of elements.
- Via JavaScript: We can also activate the bootstrap lit group via javascript.
- Fade effect: We can add a .fade class to each .tab-pane to have the tabs panel fade in. For the original content to be displayed, the first tab pane also has to have a .show.
- Methods: Methods are used to undertake different specific actions on the list group, We have some methods like constructor, show, dispose of, getInstance, and getOrCreateInstance.
- Events: Events are used to perform some of the basic functionalities. Some of the events are automatically triggered when we call the corresponding method.
Example 1: In these, we will demonstrate the bootstrap 5 list group.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
<!-- Bootstrap JavaScript -->
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<h1 class="text-success">GeeksforGeeks</h1>
<div class="list-group">
<button type="button"
class="list-group-item list-group-item-action active">
Item 1
</button>
<button type="button"
class="list-group-item list-group-item-action">
Item 2
</button>
<button type="button"
class="list-group-item list-group-item-action">
A third button item
</button>
<button type="button"
class="list-group-item list-group-item-action"
disabled>
A disabled item
</button>
</div>
</body>
</html>
Output:
Example 2: In this example, we will demonstrate bootstrap 5 list group fade effects.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
<!-- Bootstrap JavaScript -->
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h1 class="text-success">GeeksforGeeks</h1>
<div class="row">
<div class="col-2">
<div class="list-group">
<a class="list-group-item "
data-bs-toggle="list" href="#java">
JAVA
</a>
<a class="list-group-item"
data-bs-toggle="list" href="#python">
PYTHON
</a>
<a class="list-group-item"
data-bs-toggle="list" href="#c">
C++
</a>
</div>
</div>
<div class="col text-white">
<div class="">
<div class=" fade bg-info rounded " id="java">
<h3 class="text-dark">JAVA</h3>
<p>Java is a high-level, class-based, object-oriented</p>
<p>programming language that is designed to have as few</p>
<p> implementation dependencies as possible.</p>
</div>
<div class="fade bg-secondary rounded" id="python">
<h3 class="text-dark">PYTHON</h3>
<p>Python is a high-level, general-purpose programming </p>
<p> language. Its design philosophy emphasizes code </p>
<p> readability with the use of significant indentation.</p>
</div>
<div class="fade bg-primary rounded" id="c">
<h3 class="text-dark">C++</h3>
<p>C++ is a cross-platform language that can be used </p>
<p>to create high-performance applications. C++ was</p>
<p>developed by Bjarne Stroustrup, as an extension to the C</p>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/list-group/#javascript-behavior