Dropdown
Basic Dropdown
Header & Footer Dropdown
Icon Dropdown
Dropdown With Close Button
Scrolled Dropdown
Header & Icon Dropdown
Dropdown Placement
Programmatically Show/Hide Dropdown
Methods
Get or Create Instance
Static method which allows you to get the dropdown instance associated with a DOM element, or create a new one in case it wasn’t initialized.
const myDropdown = tailwind.Dropdown.getOrCreateInstance(document.querySelector("#myDropdown"));
Get Instance
Static method which allows you to get the dropdown instance associated with a DOM element.
const myDropdown = tailwind.Dropdown.getInstance(document.querySelector("#myDropdown"));
Hide
Manually hides a dropdown. Returns to the caller before the dropdown has actually been hidden (i.e. before the hidden.tw.dropdown event occurs).
myDropdown.hide();
Show
Manually opens a dropdown. Returns to the caller before the dropdown has actually been shown (i.e. before the shown.tw.dropdown event occurs).
myDropdown.show();
Toggle
Manually toggles a dropdown. Returns to the caller before the dropdown has actually been shown or hidden (i.e. before the shown.tw.dropdown or hidden.tw.dropdown event occurs).
myDropdown.toggle();
Events
Midone’s dropdown class exposes a few events for hooking into dropdown functionality. All dropdown events are fired at the dropdown itself (i.e. at the <div class="dropdown">).
| Event type | Description |
|---|---|
| show.tw.dropdown | This event fires immediately when the show instance method is called. |
| shown.tw.dropdown | This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions to complete) |
| hide.tw.dropdown | This event is fired immediately when the hide instance method has been called. |
| hidden.tw.dropdown | This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions to complete). |
const myDropdownEl = document.getElementById('myDropdown') myDropdownEl.addEventListener('hidden.tw.dropdown', function (event) { // do something... })