<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
h1
class
=
"m-4 text-success"
>
GeeksforGeeks
</
h1
>
<
h4
class
=
"ms-4"
>
Bootstrap 5 Buttons plugin
</
h4
>
<
div
class
=
"container mt-4 p-4"
>
<
button
type
=
"button"
class
=
"btn btn-primary ms-5"
id
=
"demoButton_1"
data-bs-toggle
=
"button"
autocomplete
=
"off"
>
First Demo button
</
button
>
<
button
type
=
"button"
class
=
"btn btn-warning ms-5"
id
=
"demoButton_2"
data-bs-toggle
=
"button"
autocomplete
=
"off"
>
Second Demo button
</
button
>
</
div
>
<
div
class
=
"container mt-2 p-4"
>
<
button
type
=
"button"
class
=
"btn btn-success"
id
=
"toggle-btn"
data-bs-toggle
=
"button"
autocomplete
=
"off"
>
Get the instance of the button
with primary color and toggle it
</
button
>
</
div
>
<
div
class
=
"container mt-2 p-4"
>
<
button
type
=
"button"
class
=
"btn btn-danger"
id
=
"dispose-btn"
data-bs-toggle
=
"button"
autocomplete
=
"off"
>
Get the instance of the button
with warning color and dispose it
</
button
>
</
div
>
<
script
>
var button_1 = document.getElementById("demoButton_1")
var button_2 = document.getElementById("demoButton_2")
var btn_1 = document.getElementById("toggle-btn");
btn_1.addEventListener("click", function () {
// Using the getInstance method, catch
// the preinitialized instance
const buttonInstance_1 =
bootstrap.Button.getOrCreateInstance(button_1);
// Using the toggle function with the instance
// created in the line above
buttonInstance_1.toggle();
});
var btn_2 = document.getElementById("dispose-btn");
btn_2.addEventListener("click", function () {
// Using the getOrCreateInstance method to
// catch the preinitialized instance
const buttonInstance_2 =
bootstrap.Button.getOrCreateInstance(button_2);
console.log(buttonInstance_2);
// Using the dispose function with the
// instance created in the line above
buttonInstance_2.dispose();
console.log(buttonInstance_2);
});
</
script
>
</
body
>
</
html
>