(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; }