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.)
HTML
<!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>
|
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.
HTML
<!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");
// 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