Bootstrap List group getOrCreateInstance() method is used to obtain the instance of a particular tab of the list Group. This method can work even when the instance is not pre-initialized and this method creates an instance if there isn’t one available.
The List group tab’s instance linked to a DOM element may be obtained using this static function or create one instance.
Syntax:
var tab-element = document .getElementById("listGroup-tab-id"); var tooltip-instance = bootstrap.Tooltip .getOrCreateInstance(tab-element);
Parameters: This method accepts an argument either an HTML element or its selector.
Return Value: This method returns the current Bootstrap 5 List group Tab instance to the caller. If no instance is yet created, it creates one.
Example 1: This example demonstrates how to implement the getOrCreateInstance() Method with the show() method. Here one tab’s instance is created with the getOrCreateInstance() Method but the second tab’s instance is pre-initialized.
<!DOCTYPE html> < html lang = "en" >
< head >
< link href =
rel = "stylesheet" >
< script src =
</ script >
</ head >
< body class = "m-2" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >
Bootstrap 5 List
getOrCreateInstance() Method
</ h3 >
< div role = "tabpanel" >
< div class = "list-group m-5" id = "myList" role = "tablist" >
< a class="list-group-item
list-group-item-action active"
data-bs-toggle = "list" href = "#ds" role = "tab" >
Data Structures
</ a >
< a class="list-group-item
list-group-item-action"
data-bs-toggle = "list" href = "#algo" role = "tab" >
Algorithms
</ a >
< a class="list-group-item
list-group-item-action"
data-bs-toggle = "list" href = "#bs" role = "tab" >
Bootstrap
</ a >
< a class="list-group-item
list-group-item-action"
data-bs-toggle = "list" href = "#cpp" role = "tab" >
C++
</ a >
</ div >
< div class = "tab-content m-5 p-3 bg-light" >
< div class = "tab-pane active" id = "ds" role = "tabpanel" >
A data structure is a group of data
elements that provides the easiest
way to store and perform different
actions on the data of the computer.
A data structure is a particular way
of organizing data in a computer so
that it can be used effectively.
</ div >
< div class = "tab-pane" id = "algo" role = "tabpanel" >
The word Algorithm means ” A set of
finite rules or instructions to be
followed in calculations or other
problem-solving operations ” Or ”
A procedure for solving a mathematical
problem in a finite number of steps
that frequently involves recursive
operations”
</ div >
< div class = "tab-pane" id = "bs" role = "tabpanel" >
Bootstrap is a free and open-source
collection of CSS and JavaScript/
jQuery code used for creating
dynamic websites layout and web
applications.
</ 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.
</ div >
</ div >
</ div >
< br >
< div class="container d-flex
flex-column w-50 text-center">
< button class = "btn btn-danger m-2" id = "showDSBtn" >
Create Or Get instance, and
Show Data Structures Tab
</ button >
< button class = "btn btn-danger m-2" id = "showBSBtn" >
Create Or Get instance, and
Show Bootstrap Tab
</ button >
</ div >
< script >
var dsEl =
document.getElementsByClassName(
'list-group-item')[0];
var dsElTab = new bootstrap.Tab(dsEl)
var bsEl =
document.getElementsByClassName(
'list-group-item')[2];
var bsElTab = new bootstrap.Tab(bsEl)
var sDSBtn = document.getElementById('showDSBtn')
var sBSBtn = document.getElementById('showBSBtn')
sDSBtn.addEventListener('click', function () {
// Creating a new Instance for DS Tab
var dsInstance =
bootstrap.Tab.getOrCreateInstance(dsEl);
dsInstance.show()
})
sBSBtn.addEventListener('click', function () {
var bsInstance =
bootstrap.Tab.getOrCreateInstance(bsEl);
bsElTab.show()
})
</ script >
</ body >
</ html >
|
Output:
Example 2: This example demonstrates how to implement the getOrCreateInstance() Method with the dispose() method. Here one tab’s instance is pre-initialized but the second tab’s instance gets created with the getOrCreateInstance() Method.
<!DOCTYPE html> < html lang = "en" >
< head >
< link href =
rel = "stylesheet" >
< script src =
</ script >
</ head >
< body class = "m-2" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >
Bootstrap 5 List
getOrCreateInstance()
Method
</ h3 >
< div role = "tabpanel" >
< div class = "list-group m-5"
id = "myList" role = "tablist" >
< a class="list-group-item
list-group-item-action active"
data-bs-toggle = "list" href = "#ds" role = "tab" >
Data Structures
</ a >
< a class="list-group-item
list-group-item-action"
data-bs-toggle = "list" href = "#algo" role = "tab" >
Algorithms
</ a >
< a class="list-group-item
list-group-item-action"
data-bs-toggle = "list" href = "#bs" role = "tab" >
Bootstrap
</ a >
< a class="list-group-item
list-group-item-action"
data-bs-toggle = "list" href = "#cpp" role = "tab" >
C++
</ a >
</ div >
< div class = "tab-content m-5 p-3 bg-light" >
< div class = "tab-pane active" id = "ds" role = "tabpanel" >
A data structure is a group of data
elements that provides the easiest way
to store and perform different actions
on the data of the computer. A data
structure is a particular way of
organizing data in a computer so that
it can be used effectively.
</ div >
< div class = "tab-pane" id = "algo" role = "tabpanel" >
The word Algorithm means ” A set of finite rules
or instructions to be followed in calculations
or other problem-solving operations ” Or ” A
procedure for solving a mathematical problem
in a finite number of steps that frequently
involves recursive operations”
</ div >
< div class = "tab-pane" id = "bs" role = "tabpanel" >
Bootstrap is a free and open-source collection
of CSS and JavaScript/jQuery code used for
creating dynamic websites layout and web
applications.
</ 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.
</ div >
</ div >
</ div >
< br >
< div class="container d-flex
flex-column w-75 text-center">
< button class = "btn btn-danger m-2" id = "disposeAlgoBtn" >
Create Or Get instance, and
Dispose Algo Tab
</ button >
< button class = "btn btn-danger m-2" id = "disposeCPPBtn" >
Create Or Get instance, and
Dispose cpp Tab
</ button >
</ div >
< script >
const algoEl = document.getElementById('algo');
const algoElTab = new bootstrap.Tab(algoEl)
const cppEl = document.getElementById('cpp');
const disAlgoBtn =
document.getElementById('disposeAlgoBtn')
const disCPPBtn =
document.getElementById('disposeCPPBtn')
disAlgoBtn.addEventListener('click', function () {
var algoInstance =
bootstrap.Tab.getOrCreateInstance(algoEl);
// Instance before disposing
console.log(algoInstance);
algoInstance.dispose()
// Instance after disposing
console.log(algoInstance);
})
disCPPBtn.addEventListener('click', function () {
// Creating a new Instance for CPP Tab
var cppInstance =
bootstrap.Tab.getOrCreateInstance(cppEl);
// Instance before disposing
console.log(cppInstance);
cppInstance.dispose()
// Instance after disposing
console.log(cppInstance);
})
</ script >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/list-group/#getorcreateinstance