script.js

// Accessible FAQ accordion
// - Each question is a <button> with aria-expanded / aria-controls
// - Keyboard: Tab between buttons, Enter/Space toggles, Esc closes open panel
// - "Expand all" / "Collapse all" controls
// - Deep-linking: opens the accordion for a URL hash matching an answer's id
//   or the nearest answer inside a section hash

(function () {
  'use strict';

  var questions = Array.prototype.slice.call(
    document.querySelectorAll('.faq-question')
  );

  function setOpen(btn, open) {
    var panelId = btn.getAttribute('aria-controls');
    var panel = document.getElementById(panelId);
    if (!panel) return;
    btn.setAttribute('aria-expanded', open ? 'true' : 'false');
    if (open) {
      panel.hidden = false;
    } else {
      panel.hidden = true;
    }
  }

  function toggle(btn) {
    var isOpen = btn.getAttribute('aria-expanded') === 'true';
    setOpen(btn, !isOpen);
  }

  questions.forEach(function (btn) {
    btn.addEventListener('click', function () {
      toggle(btn);
    });
    btn.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') {
        if (btn.getAttribute('aria-expanded') === 'true') {
          setOpen(btn, false);
          btn.focus();
        }
      }
    });
  });

  // Expand/Collapse all
  var expandAll = document.getElementById('expand-all');
  var collapseAll = document.getElementById('collapse-all');
  if (expandAll) {
    expandAll.addEventListener('click', function () {
      questions.forEach(function (b) { setOpen(b, true); });
    });
  }
  if (collapseAll) {
    collapseAll.addEventListener('click', function () {
      questions.forEach(function (b) { setOpen(b, false); });
    });
  }

  // Open the accordion that matches a URL hash, if any
  function openFromHash() {
    var hash = window.location.hash.replace('#', '');
    if (!hash) return;
    var target = document.getElementById(hash);
    if (!target) return;
    // If the hash points at an answer panel, find its controlling button.
    if (target.classList && target.classList.contains('faq-answer')) {
      var btn = document.querySelector(
        '.faq-question[aria-controls="' + hash + '"]'
      );
      if (btn) setOpen(btn, true);
    }
  }
  openFromHash();
  window.addEventListener('hashchange', openFromHash);
})();