Close Native Dropdown
Utility
Dropdown
JS
- Give any child of the dropdown an attribute name of data-dropdown-close to close the dropdown on click of that child
<script>
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("click", (e) => {
if (!e.target.closest("[data-dropdown-close]")) return;
const dropdown = e.target.closest(".w-dropdown");
dropdown?.dispatchEvent(new CustomEvent("w-close", { bubbles: true }));
dropdown?.dispatchEvent(new CustomEvent("w-dropdown", { bubbles: true }));
});
});
</script>Preview Links
Custom JS
Enable custom code in preview or view on published site.
Enable custom code?
Last Updated: Dec 3, 2025
- Give any child of the dropdown an attribute name of data-dropdown-close to close the dropdown on click of that child
<script>
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("click", (e) => {
if (!e.target.closest("[data-dropdown-close]")) return;
const dropdown = e.target.closest(".w-dropdown");
dropdown?.dispatchEvent(new CustomEvent("w-close", { bubbles: true }));
dropdown?.dispatchEvent(new CustomEvent("w-dropdown", { bubbles: true }));
});
});
</script>