Bootstrap 5 Dropdowns Methods

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.)

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.

Output:

Reference:https://getbootstrap.com/docs/5.0/components/dropdowns/#methods