`; block.appendChild(head); const list = document.createElement('div'); list.className = 'faq-list'; cat.items.forEach((item, i) => { const faqItem = document.createElement('div'); faqItem.className = 'faq-item'; faqItem.dataset.q = item.q.toLowerCase(); faqItem.dataset.a = item.a.replace(/<[^>]+>/g, ' ').toLowerCase(); faqItem.dataset.cat = cat.id; const qBtn = document.createElement('button'); qBtn.className = 'faq-q'; qBtn.innerHTML = `${item.q}`; const aWrap = document.createElement('div'); aWrap.className = 'faq-a'; const aInner = document.createElement('div'); aInner.className = 'faq-a-inner'; aInner.innerHTML = item.a; aWrap.appendChild(aInner); qBtn.addEventListener('click', () => { const isOpen = faqItem.classList.contains('open'); document.querySelectorAll('.faq-item.open').forEach(el => { if (el !== faqItem) { el.classList.remove('open'); el.querySelector('.faq-a').style.maxHeight = null; } }); if (isOpen) { faqItem.classList.remove('open'); aWrap.style.maxHeight = null; } else { faqItem.classList.add('open'); aWrap.style.maxHeight = aWrap.scrollHeight + 'px'; } }); faqItem.appendChild(qBtn); faqItem.appendChild(aWrap); list.appendChild(faqItem); }); block.appendChild(list); mainEl.appendChild(block); }); const noResultsEl = document.createElement('div'); noResultsEl.className = 'faq-no-results'; noResultsEl.id = 'faqNoResults'; noResultsEl.innerHTML = `

No matching questions

Try a different search term, or browse by category instead.

`; mainEl.appendChild(noResultsEl); /* ════════════════════════════════════════════ SCROLL-TO-CATEGORY + ACTIVE STATE ════════════════════════════════════════════ */ function scrollToCategory(id){ const el = document.getElementById('cat-' + id); if (!el) return; const headerOffset = 90; const top = el.getBoundingClientRect().top + window.scrollY - headerOffset; window.scrollTo({ top, behavior: 'smooth' }); } function setActiveNav(id){ document.querySelectorAll('.faq-nav-item').forEach(el => el.classList.toggle('active', el.dataset.cat === id)); document.querySelectorAll('.faq-mobile-cat-pill').forEach(el => el.classList.toggle('active', el.dataset.cat === id)); } const blocks = Array.from(document.querySelectorAll('.faq-category-block')); const navObs = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) setActiveNav(e.target.id.replace('cat-', '')); }); }, { rootMargin: '-30% 0px -55% 0px' }); blocks.forEach(b => navObs.observe(b)); /* ════════════════════════════════════════════ SEARCH / FILTER ════════════════════════════════════════════ */ function escapeRegExp(s){ return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); } function highlightText(el, term){ const original = el.dataset.originalHtml || el.innerHTML; el.dataset.originalHtml = original; if (!term){ el.innerHTML = original; return; } const re = new RegExp('(' + escapeRegExp(term) + ')', 'ig'); el.innerHTML = original.replace(re, '$1'); } function runSearch(){ const term = searchInput.value.trim().toLowerCase(); searchClear.classList.toggle('show', term.length > 0); const allItems = document.querySelectorAll('.faq-item'); let visibleCount = 0; allItems.forEach(item => { const matches = !term || item.dataset.q.includes(term) || item.dataset.a.includes(term); item.style.display = matches ? '' : 'none'; if (matches) visibleCount++; const qTextEl = item.querySelector('.faq-q-text'); highlightText(qTextEl, term); }); document.querySelectorAll('.faq-category-block').forEach(block => { const visibleItems = block.querySelectorAll('.faq-item:not([style*="display: none"])'); block.style.display = (term && visibleItems.length === 0) ? 'none' : ''; }); document.getElementById('faqNoResults').classList.toggle('show', term.length > 0 && visibleCount === 0); if (term) { resultCount.textContent = visibleCount + (visibleCount === 1 ? ' result found' : ' results found'); resultCount.classList.add('show'); } else { resultCount.classList.remove('show'); } } searchInput.addEventListener('input', runSearch); searchClear.addEventListener('click', () => { searchInput.value=''; runSearch(); searchInput.focus(); });