Bootstrap 5 List Group getInstance() method is used to get the instance of the tab attached with the DOM element passes as the parameter. This method returns the instance that can later be used to perform different operations like triggering other methods on the Tab pane.
Syntax:
const element = document.querySelector("#listItem-ID"); element.getInstance(element);
Parameters: The list group getInstance() method accepts a DOM element or its selector as the only parameter.
Return Value: This method returns the tab instance of the DOM element passes as the parameter to the caller.
Example 1: In this example, we used the getInstance() method of the list group to get the instance of a tab pane and then trigger its show() method.
<!DOCTYPE html> < html lang = "en" >
< head >
< title >Bootstrap 5 List Group getInstance() Method</ title >
< link href =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container text-center" >
< div class = "text-center" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< strong >
Bootstrap 5 List Group getInstance() Method
</ strong >
</ div >
< div class = "row my-4" >
< div class = "col-4 offset-2" >
< div class = "list-group" role = "tablist" >
< a id = "sdesheet-tab"
class="list-group-item
list-group-item-action active"
data-bs-toggle = "list"
href = "#sdesheet" role = "tab" >
SDE Sheet
</ a >
< a id = "courses-tab"
class="list-group-item
list-group-item-action"
data-bs-toggle = "list"
href = "#courses" role = "tab" >
Courses
</ a >
< a id = "practice-tab"
class="list-group-item
list-group-item-action"
data-bs-toggle = "list"
href = "#practice" role = "tab" >
Practice
</ a >
</ div >
</ div >
< div class = "col-4" >
< div class = "tab-content" >
< div class = "tab-pane active"
id = "sdesheet" role = "tabpanel" >
GeeksforGeeks's SDE Sheet is a curated list
of Data Structures and Algorithms questions
which will help you to prepare for the
interviews in big tech companies.
</ div >
< div class = "tab-pane" id = "courses" role = "tabpanel" >
GeeksforGeeks offers both free and paid courses.
Free courses are good for getting the beginner
level knowledge or to get comfortable with a
technology whereas paid courses offers much
in-depth content.
</ div >
< div class = "tab-pane" id = "practice" role = "tabpanel" >
GeeksforGeeks Practice portal have thousands of
question for you to attempt and to enhance your
skills. Everyday, there is a Problem of the Day
(POTD) which will earn you geek bits if you solve
that correctly. These geek bits can be used to
redeem exciting prizes.
</ div >
</ div >
</ div >
</ div >
< button class = "btn btn-success mx-auto mt-4"
onclick = "getInstanceAndShow()" >
getInstance and Show Courses
</ button >
</ div >
< script >
// Create all the tabs
new bootstrap.Tab('#sdesheet-tab')
new bootstrap.Tab('#courses-tab')
new bootstrap.Tab('#practice-tab')
// Function to get Instance and Show
function getInstanceAndShow() {
var myTab = bootstrap.Tab.getInstance("#courses-tab");
myTab.show();
}
</ script >
</ body >
</ html >
|
Output:
Example 2: In this example, we used the getInstance() method to get the instance of the practice tab and triggered the dispose() method to destroy the instance, so that the tab cannot be controlled programmatically.
<!DOCTYPE html> < html lang = "en" >
< head >
< title >Bootstrap 5 List Group getInstance() Method</ title >
< link href =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container text-center" >
< div class = "text-center" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< strong >
Bootstrap 5 List Group getInstance() Method
</ strong >
</ div >
< div class = "row my-4" >
< div class = "col-4 offset-2" >
< div class = "list-group" role = "tablist" >
< a
id = "sdesheet-tab"
class="list-group-item
list-group-item-action active"
data-bs-toggle = "list"
href = "#sdesheet" role = "tab" >
SDE Sheet
</ a >
< a
id = "courses-tab"
class="list-group-item
list-group-item-action"
data-bs-toggle = "list"
href = "#courses" role = "tab" >
Courses
</ a >
< a
id = "practice-tab"
class="list-group-item
list-group-item-action"
data-bs-toggle = "list"
href = "#practice" role = "tab" >
Practice
</ a >
</ div >
</ div >
< div class = "col-4" >
< div class = "tab-content" >
< div class = "tab-pane active"
id = "sdesheet" role = "tabpanel" >
GeeksforGeeks's SDE Sheet is a curated list
of Data Structures and Algorithms questions
which will help you to prepare for the
interviews in big tech companies.
</ div >
< div class = "tab-pane" id = "courses" role = "tabpanel" >
GeeksforGeeks offers both free and paid courses.
Free courses are good for getting the beginner
level knowledge or to get comfortable with a
technology whereas paid courses offers much
in-depth content.
</ div >
< div class = "tab-pane" id = "practice" role = "tabpanel" >
GeeksforGeeks Practice portal have thousands of
question for you to attempt and to enhance your
skills. Everyday, there is a Problem of the Day
(POTD) which will earn you geek bits if you solve
that correctly. These geek bits can be used to
redeem exciting prizes.
</ div >
</ div >
</ div >
</ div >
< button
class = "btn btn-success mx-auto mt-4"
onclick = "getInstanceAndShow()" >
getInstance and Show Practice
</ button >
< button
class = "btn btn-danger mx-auto mt-4"
onclick = "getInstanceAndDispose()" >
getInstance and Dispose Practice
</ button >
</ div >
< script >
// Create all the tabs
new bootstrap.Tab('#sdesheet-tab')
new bootstrap.Tab('#courses-tab')
new bootstrap.Tab('#practice-tab')
// Function to get Instance and Dispose
function getInstanceAndDispose() {
var practiceTab = bootstrap.Tab.getInstance("#practice-tab");
practiceTab.dispose();
}
// Function to get Instance and Show
function getInstanceAndShow() {
var practiceTab = bootstrap.Tab.getInstance("#practice-tab");
practiceTab.show();
}
</ script >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/list-group/#getinstance