(function(){ // Run after DOM ready document.addEventListener('DOMContentLoaded', function() { // Helper: find the content controlled by a button function getContentForButton(btn) { const ctl = btn.getAttribute('aria-controls'); if (ctl) return document.getElementById(ctl); // fallback: look for sibling/menu-content return btn.closest('.e-n-menu-item')?.querySelector('.e-n-menu-content') || null; } // Close a single button/menu function closeButton(btn) { const content = getContentForButton(btn); if (content) content.style.display = 'none'; btn.setAttribute('aria-expanded', 'false'); btn.classList.remove('e-n-open'); btn.closest('.e-n-menu-item')?.classList.remove('e-n-open'); const opened = btn.querySelector('.e-n-menu-dropdown-icon-opened'); const closed = btn.querySelector('.e-n-menu-dropdown-icon-closed'); if (opened) opened.style.display = 'none'; if (closed) closed.style.display = ''; } // Open a single button/menu function openButton(btn) { const content = getContentForButton(btn); if (!content) return; // let CSS pick the display where possible; otherwise force block content.style.display = ''; if (getComputedStyle(content).display === 'none') content.style.display = 'block'; btn.setAttribute('aria-expanded', 'true'); btn.classList.add('e-n-open'); btn.closest('.e-n-menu-item')?.classList.add('e-n-open'); const opened = btn.querySelector('.e-n-menu-dropdown-icon-opened'); const closed = btn.querySelector('.e-n-menu-dropdown-icon-closed'); if (opened) opened.style.display = ''; if (closed) closed.style.display = 'none'; } // Close every menu except optional `exceptBtn` function closeAll(exceptBtn) { document.querySelectorAll('.e-n-menu-dropdown-icon[aria-expanded="true"], .e-n-menu-dropdown-icon.e-n-open') .forEach(btn => { if (btn === exceptBtn) return; closeButton(btn); }); } // Toggle function toggleButton(btn) { const isOpen = btn.getAttribute('aria-expanded') === 'true' || btn.classList.contains('e-n-open'); if (isOpen) closeButton(btn); else { closeAll(btn); openButton(btn); } } // Use event delegation so this works even if the menu is injected later document.addEventListener('click', function(e) { const btn = e.target.closest('.e-n-menu-dropdown-icon'); if (btn) { e.preventDefault(); e.stopPropagation(); // avoid immediate document click close toggleButton(btn); return; } // Click outside any menu item -> close all if (!e.target.closest('.e-n-menu-item')) { closeAll(); } }, true); // Also allow Escape to close menus document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeAll(); }); // Optional: handle touchstart to make mobile feel snappier document.addEventListener('touchstart', function(e) { const btn = e.target.closest('.e-n-menu-dropdown-icon'); if (btn) { e.stopPropagation(); toggleButton(btn); } else if (!e.target.closest('.e-n-menu-item')) { closeAll(); } }, {passive: true}); }); })(); .e-n-menu-item .e-n-menu-content { display: none; } /* optional visual class when open */ .e-n-menu-item.e-n-open > .e-n-menu-content { display: block; }