<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
>
<
script
src
=
</
script
>
<
script
>
document.addEventListener("DOMContentLoaded",
function () {
// Obtaining the dropdown element
var dropdownElement =
document.getElementById("myDropdown");
// Create a dropdown instance
var myDropdown =
new bootstrap.Dropdown(dropdownElement);
// The toggling of the dropdown using
// the toggle() function
var togBtn =
document.getElementById("toggleBtn");
togBtn.addEventListener("click", function () {
myDropdown.toggle();
});
// Getting the dropdown instance using
// the toggle() function
var getTBtn =
document.getElementById("getInstanceBtn");
getTBtn.addEventListener("click", function () {
var dropdownInstance =
bootstrap.Dropdown.getInstance(dropdownElement);
console.log(dropdownInstance);
});
// Disposing the dropdown using the dispose() function
var disBtn = document.getElementById("disposeBtn");
disBtn.addEventListener("click", function () {
myDropdown.dispose();
console.log(myDropdown);
});
});
</
script
>
</
head
>
<
body
>
<
h1
class
=
"m-4 text-success"
>
GeeksforGeeks
</
h1
>
<
h4
class
=
"ms-4"
>
Bootstrap 5 Dropdowns Methods
</
h4
>
<
div
class
=
"container text-center"
>
<
button
type
=
"button"
class
=
"btn btn-primary"
id
=
"getInstanceBtn"
>
Get Dropdown Instance
</
button
>
<
button
type
=
"button"
class
=
"btn btn-success"
id
=
"toggleBtn"
>
Toggle Dropdown
</
button
>
<
button
type
=
"button"
class
=
"btn btn-danger"
id
=
"disposeBtn"
>
Dispose dropdown
</
button
>
</
div
>
<
hr
>
<
div
class
=
"container text-center"
>
<
div
class
=
"dropdown"
>
<
button
type
=
"button"
class="btn btn-secondary
dropdown-toggle"
id
=
"myDropdown"
>
Dropdown
</
button
>
<
ul
class
=
"dropdown-menu"
>
<
li
>
<
p
>
<
abbr
title
=
"Cascading Styling Sheets"
class
=
"ms-2"
>
CSS
</
abbr
>
</
p
>
</
li
>
<
li
>
<
p
>
<
abbr
title
=
"HyperText Markup Language"
class
=
"ms-2"
>
HTML
</
abbr
>
</
p
>
</
li
>
<
li
>
<
p
>
<
abbr
title
=
"JavaScript"
class
=
"ms-2"
>
JS
</
abbr
>
</
p
>
</
li
>
</
ul
>
</
div
>
</
div
>
</
body
>
</
html
>