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

This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:

Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)

…or something like this:

The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.

As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!