Bootstrap 5 List group Methods
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.
HTML
<!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" >w3wiki</ 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.
HTML
<!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" >w3wiki</ 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
Contact Us