<!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
>