document.addEventListener(‘DOMContentLoaded’, function () { const sidebar = document.querySelector(‘.store-sidebar’); if (!sidebar) return; // Helper to create an ID safely const uid = (prefix) => prefix + ‘-‘ + Math.random().toString(36).slice(2, 8); // Turn each H6 + following UL block into an accordion section (mobile only via CSS) const headings = sidebar.querySelectorAll(‘h6.wp-block-heading’); headings.forEach(h => { // Find the next UL sibling that represents this section’s list let next = h.nextElementSibling; while (next && next.tagName !== ‘UL’) { // skip spacers/divs between next = next.nextElementSibling; } if (!next) return; // Build an accessible toggle button that replaces the H6 text const label = h.textContent.trim(); const panelId = uid(‘acc-panel’); const btn = document.createElement(‘button’); btn.className = ‘gtp-acc-toggle’; btn.type = ‘button’; btn.setAttribute(‘aria-controls’, panelId); btn.setAttribute(‘aria-expanded’, ‘false’); btn.innerHTML = label; // Wrap the target UL in a panel container (for smooth collapse) const panelWrap = document.createElement(‘div’); panelWrap.className = ‘gtp-acc-panel’; panelWrap.id = panelId; panelWrap.setAttribute(‘aria-hidden’, ‘true’); // Move UL into the panel wrapper next.parentNode.insertBefore(panelWrap, next); panelWrap.appendChild(next); // Insert the button where the H6 was, then remove H6 h.parentNode.insertBefore(btn, h); h.remove(); // Toggle interaction btn.addEventListener(‘click’, () => { const expanded = btn.getAttribute(‘aria-expanded’) === ‘true’; btn.setAttribute(‘aria-expanded’, String(!expanded)); panelWrap.setAttribute(‘aria-hidden’, String(expanded)); }); }); // Nested subcategory toggles for li > ul.children // We don’t break the main link; we add a separate small toggle button. const parentLis = sidebar.querySelectorAll(‘li > ul.children’); parentLis.forEach(childUl => { const li = childUl.parentElement; if (!li) return; // Wrap the existing link text with a row that also contains a toggle button const topLink = li.querySelector(‘:scope > a’); if (!topLink) return; // Create subrow container const row = document.createElement(‘div’); row.className = ‘gtp-subrow’; // Move the link into the row topLink.replaceWith(row); row.appendChild(topLink); // Create the toggle button const subId = uid(‘subpanel’); const subBtn = document.createElement(‘button’); subBtn.type = ‘button’; subBtn.className = ‘gtp-subtoggle’; subBtn.setAttribute(‘aria-controls’, subId); subBtn.setAttribute(‘aria-expanded’, ‘false’); row.appendChild(subBtn); // Wrap the children UL in a collapsible container const subPanel = document.createElement(‘div’); subPanel.className = ‘gtp-subpanel’; subPanel.id = subId; subPanel.setAttribute(‘aria-hidden’, ‘true’); childUl.parentNode.insertBefore(subPanel, childUl); subPanel.appendChild(childUl); // Toggle nested panel subBtn.addEventListener(‘click’, (e) => { e.stopPropagation(); const expanded = subBtn.getAttribute(‘aria-expanded’) === ‘true’; subBtn.setAttribute(‘aria-expanded’, String(!expanded)); subPanel.setAttribute(‘aria-hidden’, String(expanded)); }); }); // Optional: start with “Manufacturers” and “TOP Product Categories” expanded on mobile // (You can remove this block if you prefer all collapsed initially.) const preferOpenHeadings = [‘Manufacturers’, ‘TOP Product Categories’]; sidebar.querySelectorAll(‘.gtp-acc-toggle’).forEach(btn => { if (preferOpenHeadings.includes(btn.textContent.trim())) { const panel = document.getElementById(btn.getAttribute(‘aria-controls’)); btn.setAttribute(‘aria-expanded’, ‘true’); panel && panel.setAttribute(‘aria-hidden’, ‘false’); } }); }); /* ====== Base (desktop first): keep existing look ====== */ .store-sidebar { /* Optional: keep your existing padding via inline styles */ font-size: 0.95rem; } .store-sidebar h6.wp-block-heading { margin: 0 0 .5rem; font-size: 0.95rem; text-transform: uppercase; letter-spacing: .02em; } /* ====== Mobile accordion behavior ====== */ /* Turn headings into toggle buttons (JS will inject .gtp-acc-toggle) */ .gtp-acc-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .75rem; background: var(–wp–preset–color–tertiary, #f6f6f6); color: inherit; border: 1px solid #0357a0; border-radius: 6px; padding: .8rem .95rem; margin: 0 0 .35rem; font: inherit; font-weight: 600; text-align: left; cursor: pointer; } .wp-block-column { word-break: normal; } /* Chevron indicator */ .gtp-acc-toggle::after { content: ”; width: .6rem; height: .6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s ease; opacity: .75; z-index: 1000; } .gtp-acc-toggle[aria-expanded=”true”]::after { transform: rotate(45deg); } /* Panels (the ULs following headings) */ .gtp-acc-panel { overflow: hidden; transition: grid-template-rows .25s ease, padding .2s ease; display: grid; grid-template-rows: 0fr; /* collapsed */ padding: 0 .1rem; margin: 0 0 .5rem .1rem; background: transparent; } .gtp-acc-panel[aria-hidden=”false”] { grid-template-rows: 1fr; /* expanded */ padding: .25rem .25rem .1rem; } .gtp-acc-panel > * { min-height: 0; /* enable the grid collapse trick */ } /* Make lists more thumb-friendly on mobile */ .store-sidebar ul { list-style: none; padding-left: .1rem; margin: 0; } .store-sidebar li { display: block; border-bottom: 1px solid rgba(0,0,0,.06); } .store-sidebar li a { display: block; padding: .4rem .1rem; text-decoration: none; } /* ===== Nested category sub-accordions (ul.children) ===== */ /* Wrap each parent row (li that has a sublist) into a header area + a sub-toggle button */ .gtp-subrow { display: flex; align-items: center; justify-content: space-between; gap: .4rem; } .gtp-subtoggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; /* remove black boxes border-radius: 6px; border: 1px solid rgba(0,0,0,.12); background: #fff; */ cursor: pointer; } .gtp-subtoggle::before { content: ”; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s ease; opacity: .75; } .gtp-subtoggle[aria-expanded=”true”]::before { transform: rotate(45deg); } /* The nested list panel */ .gtp-subpanel { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; } .gtp-subpanel[aria-hidden=”false”] { grid-template-rows: 1fr; } .gtp-subpanel > ul { min-height: 0; margin: 0 .25rem .25rem 0; }