Bootstrap 5 List group getOrCreateInstance() Method
Last Updated :
22 Jul, 2024
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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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
Similar Reads
Bootstrap 5 List group Active items Bootstrap 5 provides the List Group Active feature in which items are stored in form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Active feature is used to indicate the currently active selection. List group Active items classes: .ac
2 min read
Bootstrap 5 List group Disabled items Bootstrap 5 provides the List Group disabled items feature in which items are stored in form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Disabled items feature is used to indicate the item is currently disabled. List Group Disabled
2 min read
Bootstrap 5 List group Links and buttons Bootstrap 5 provides the List Group Links and Buttons items feature in which items are actionable and stored in form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Links and Buttons items feature is used to indicate the item is current
2 min read
Bootstrap 5 List group Flush Bootstrap 5 provides the List Group Flush feature in which items are stored in the form of a list. List groups are a flexible and powerful component for displaying a series of content. The List Group Flush feature is used to remove borders and rounded corners around the items on the list. List group
2 min read
Bootstrap 5 List group Numbered Bootstrap 5 List Group Numbered is one of the capabilities offered by List Group in Bootstrap 5, which is used to keep items in the form of a list and display them sequentially through the use of numbers. List Group Numbered Classes: list-group-item: This class is used to indicate and add the items
2 min read
Bootstrap 5 List group Horizontal Bootstrap 5 List group Horizontal facilitates to modification & alignment of the structure of the list group items from vertical to horizontal, across all breakpoints, by implementing the .list-group-horizontal class. In order to create a list group horizontal that starts with the min-width of t
2 min read
Bootstrap 5 List group Contextual classes Bootstrap 5 List group Contextual classes are used to style list-group-items with different backgrounds and colors. Bootstrap 5 List group Contextual Used Classes: list-group-item-primary: For blue color styling of the list itemlist-group-item-success: For green color styling of the list itemlist-gr
2 min read
Bootstrap 5 List group with badges Bootstrap 5 List group with badges can be used to add badges to the list group item to indicate the count of objects. List group With badges Classes: No special classes are used in the List group With badges. You can customize the list using .badge classes and style them with flex. Bootstrap 5 List
2 min read
Bootstrap 5 List group Custom content Bootstrap 5 List Group Custom content allows us to use HTML inside the list, here, the term "Custom Content" refers to HTML, therefore any HTML elements can be used inside, including anchor tags, paragraph tags, divs, photos, and many more.Bootstrap 5 List Group Custom content Classes: There is no p
2 min read
Bootstrap 5 List group Checkboxes and radios Bootstrap 5 List group Checkboxes and radios use .list-group and .list-group-item classes to create a list of items. The .list-group class is used with <ul> element and the .list-group-item is used with <li> element. Then create the checkbox and radios in the input element using the type
2 min read