In Bootstrap 5 Dropdowns, there are pre-defined methods that we can use to trigger different types of functionalities in dropdowns. The methods can be implemented using JavaScript and JQuery.
Bootstrap 5 Dropdowns Methods: The Dropdowns Methods with their function are given below:
- toggle() method: This method is used to toggle open/close a closed/opened dropdown.
- show() method: This method is used to open a closed dropdown.
- hide() method: This method closes an opened dropdown element.
- update() method: This method updates the dropdown element's position.
- dispose() method: Destroys a dropdown element. (Deletes the DOM element's stored data)
- getInstance() method: This is a static method that can be used to obtain the dropdown instance connected to a DOM element.
- getOrCreateInstance() method: It is a static method that either returns the relevant dropdown element's instance or produces a new dropdown instance if the one associated with the DOM element wasn't initialized.
Syntax:
dropdown-instance.toggle();Example 1: This example demonstrates the usage of the toggle(), getInstance(), and dispose() methods and you can see the instance and the disposing of it in the browser dev tools console(Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac) to open the browser console panel.)
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</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>
Output:
Example 2: The code below demonstrates how to use the hide(), show(), and the getOrCreateInstance() dropdowns methods and you can see the instance in the browser dev tools console(Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac) to open the browser console panel.). Because the instance is not created at first and only created when the getOrCreateInstance is triggered, so here the first button needs to be clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</script>
<script>
document.addEventListener("DOMContentLoaded",
function () {
// Obtaining the dropdown element
var dropdownElement =
document.getElementById("myDropdown");
// Declaring dropdown instance
var dropdownInstance;
// Getting the dropdown instance using
// the toggle() function
var getIoCBtn =
document.getElementById("getInstCreateBtn");
getIoCBtn.addEventListener("click", function () {
dropdownInstance =
bootstrap.Dropdown.getOrCreateInstance(dropdownElement);
console.log(dropdownInstance);
});
// The toggling of the dropdown using the
// toggle() function
var shBtn = document.getElementById("showBtn");
shBtn.addEventListener("click", function () {
dropdownInstance.show();
});
// Disposing the dropdown using the dispose() function
var hidBtn = document.getElementById("hideBtn");
hidBtn.addEventListener("click", function () {
dropdownInstance.hide();
});
});
</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="getInstCreateBtn">
Create Dropdown Instance and get it
</button>
<button type="button"
class="btn btn-success"
id="showBtn">
Show Dropdown
</button>
<button type="button"
class="btn btn-danger"
id="hideBtn">
Hide 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 class="p-2">
Data Structures
</p>
</li>
<li>
<p class="p-2">
Algorithms
</p>
</li>
<li>
<p class="p-2">
Cyber Security
</p>
</li>
</ul>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#methods