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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</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
