Bootstrap 5 List Group methods that are used to control the visibility of the List Group component. For example, these methods can be used to show a list of group components or dispose of them.
Bootstrap 5 List Group Methods:
- constructor: It is used to activate a tab element as a Bootstrap 5 List Group element after which we can utilize different methods given by Bootstrap 5 such as show(), dispose(), etc.
- show: It is used to activate and select a tab and show the content relevant to it.
- dispose: It is used to destroy the element as a Bootstrap 5 list group element.
- getInstance: It is a static method that is used to get the list group element associated with the DOM.
- getOrCreateInstance: It is a static method that is used to get the list group element associated with the DOM or create a new one if it is not present.
Syntax:
listGroupElement.list_group_method()Example 1: In this example, we will show different List group tabs using the "show()" method given by the Bootstrap 5 List Group object.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 class="m-2">
<h1 class="text-success">GeeksforGeeks</h1>
<h3>Bootstrap 5 List Group Methods</h3>
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item active
list-group-item-action"
id="list-home-list"
data-bs-toggle="list"
href="#list-home"
role="tab"
aria-controls="list-home">
Home
</a>
<a class="list-group-item list-group-item-action"
id="list-profile-list"
data-bs-toggle="list"
href="#list-profile"
role="tab"
aria-controls="list-profile">
About
</a>
<a class="list-group-item list-group-item-action"
id="list-messages-list"
data-bs-toggle="list"
href="#list-messages"
role="tab"
aria-controls="list-messages">
Contact
</a>
<a class="list-group-item list-group-item-action"
id="list-settings-list"
data-bs-toggle="list"
href="#list-settings"
role="tab"
aria-controls="list-settings">
Settings
</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active"
id="list-home"
role="tabpanel"
aria-labelledby="list-home-list">
Home content
</div>
<div class="tab-pane fade"
id="list-profile"
role="tabpanel"
aria-labelledby="list-profile-list">
About content
</div>
<div class="tab-pane fade"
id="list-messages"
role="tabpanel"
aria-labelledby="list-messages-list">
Contact content
</div>
<div class="tab-pane fade"
id="list-settings"
role="tabpanel"
aria-labelledby="list-settings-list">
Settings content
</div>
</div>
</div>
</div>
<br>
<button id="showAboutBtn">Show About Tab</button>
<button id="showSettingsBtn">Show Settings Tab</button>
<script>
const aboutEl = document.getElementsByClassName('list-group-item')[1];
const aboutElTab = new bootstrap.Tab(aboutEl)
const settingsEl = document.getElementsByClassName('list-group-item')[3];
const settingsElTab = new bootstrap.Tab(settingsEl)
const aboutBtn = document.getElementById('showAboutBtn')
const settingsBtn = document.getElementById('showSettingsBtn')
aboutBtn.addEventListener('click', function() {
aboutElTab.show()
})
settingsBtn.addEventListener('click', function() {
settingsElTab.show()
})
</script>
</body>
</html>
Output:
Example 2: In this example, we will show and dispose of the list group element using the "show()" and "dispose()" methods given by the Bootstrap 5 List Group object. Once we dispose of a list group element, we cannot use any methods given by the Bootstrap 5 List Group object as it gets destroyed in the DOM.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 class="m-2">
<h1 class="text-success">GeeksforGeeks</h1>
<h3>bootstrap 5 List Group Methods</h3>
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab"
role="tablist">
<a class="list-group-item active
list-group-item-action"
id="list-home-list"
data-bs-toggle="list"
href="#list-home" role="tab"
aria-controls="list-home">
Home
</a>
<a class="list-group-item list-group-item-action"
id="list-profile-list" data-bs-toggle="list"
href="#list-profile" role="tab"
aria-controls="list-profile">
About
</a>
<a class="list-group-item list-group-item-action"
id="list-messages-list" data-bs-toggle="list"
href="#list-messages" role="tab"
aria-controls="list-messages">
Contact
</a>
<a class="list-group-item list-group-item-action"
id="list-settings-list" data-bs-toggle="list"
href="#list-settings" role="tab"
aria-controls="list-settings">
Settings
</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active"
id="list-home" role="tabpanel"
aria-labelledby="list-home-list">
Home content
</div>
<div class="tab-pane fade" id="list-profile"
role="tabpanel"
aria-labelledby="list-profile-list">
About content
</div>
<div class="tab-pane fade" id="list-messages"
role="tabpanel"
aria-labelledby="list-messages-list">
Contact content
</div>
<div class="tab-pane fade" id="list-settings"
role="tabpanel"
aria-labelledby="list-settings-list">
Settings content
</div>
</div>
</div>
</div>
<br>
<button id="showAboutBtn">Show About Tab</button>
<button id="disposeAboutBtn">Dispose About Tab</button>
<script>
const aboutEl =
document.getElementsByClassName('list-group-item')[1];
const aboutElTab = new bootstrap.Tab(aboutEl)
const aboutBtn = document.getElementById('showAboutBtn')
const disposeBtn = document.getElementById('disposeAboutBtn')
aboutBtn.addEventListener('click', function() {
aboutElTab.show()
})
disposeBtn.addEventListener('click', function() {
aboutElTab.dispose()
})
</script>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/list-group/#methods