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