Bootstrap 5 FAQ Accordion for Vanilla JS

<!-- Requires Bootstrap 5.3 CSS + theme.css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="theme.css"> -->
<section class="px-4 py-5">
  <div class="mw-2xl mx-auto">
    <h2 class="fs-3 fw-bold text-center text-body-emphasis">Frequently asked questions</h2>
    <div class="mt-5 d-flex flex-column gap-2">
      <div class="bg-body border shadow-sm rounded-3">
        <button type="button" class="w-100 d-flex align-items-center justify-content-between gap-3 px-3 py-3 text-start fw-semibold text-body-emphasis" data-toggle="q1" data-expanded="q1" aria-expanded="true" aria-controls="faq-a1">
          <span>Can I cancel anytime?</span><span class="fs-5 fw-bold text-brand" aria-hidden="true">+</span>
        </button>
        <div id="faq-a1" data-show="q1">
          <p class="px-3 pb-3 small lh-lg text-body-secondary">Yes. Cancel from your billing page and you keep access until the end of the period.</p>
        </div>
      </div>
      <div class="bg-body border shadow-sm rounded-3">
        <button type="button" class="w-100 d-flex align-items-center justify-content-between gap-3 px-3 py-3 text-start fw-semibold text-body-emphasis" data-toggle="q2" data-expanded="q2" aria-expanded="false" aria-controls="faq-a2">
          <span>Do you offer a free trial?</span><span class="fs-5 fw-bold text-brand" aria-hidden="true">+</span>
        </button>
        <div id="faq-a2" data-show="q2" hidden>
          <p class="px-3 pb-3 small lh-lg text-body-secondary">Every paid plan starts with a 14-day free trial — no credit card required.</p>
        </div>
      </div>
      <div class="bg-body border shadow-sm rounded-3">
        <button type="button" class="w-100 d-flex align-items-center justify-content-between gap-3 px-3 py-3 text-start fw-semibold text-body-emphasis" data-toggle="q3" data-expanded="q3" aria-expanded="false" aria-controls="faq-a3">
          <span>Which payment methods do you accept?</span><span class="fs-5 fw-bold text-brand" aria-hidden="true">+</span>
        </button>
        <div id="faq-a3" data-show="q3" hidden>
          <p class="px-3 pb-3 small lh-lg text-body-secondary">All major cards, UPI, netbanking and invoicing for annual plans.</p>
        </div>
      </div>
      <div class="bg-body border shadow-sm rounded-3">
        <button type="button" class="w-100 d-flex align-items-center justify-content-between gap-3 px-3 py-3 text-start fw-semibold text-body-emphasis" data-toggle="q4" data-expanded="q4" aria-expanded="false" aria-controls="faq-a4">
          <span>Is my data secure?</span><span class="fs-5 fw-bold text-brand" aria-hidden="true">+</span>
        </button>
        <div id="faq-a4" data-show="q4" hidden>
          <p class="px-3 pb-3 small lh-lg text-body-secondary">Data is encrypted in transit and at rest, and we never sell personal information.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
  (() => {
    const state = { q1: true, q2: false, q3: false, q4: false };
    const actions = {  };
    const pair = (s) => s.split(':');
    const sync = () => {
      document.querySelectorAll('[data-show]').forEach((el) => (el.hidden = !state[el.dataset.show]));
      document.querySelectorAll('[data-hide]').forEach((el) => (el.hidden = !!state[el.dataset.hide]));
      document.querySelectorAll('[data-when]').forEach((el) => { const [k, v] = pair(el.dataset.when); el.hidden = state[k] !== v; });
      document.querySelectorAll('[data-pressed]').forEach((el) => { const [k, v] = pair(el.dataset.pressed); el.setAttribute('aria-pressed', String(state[k] === v)); });
      document.querySelectorAll('[data-expanded]').forEach((el) => el.setAttribute('aria-expanded', String(!!state[el.dataset.expanded])));
    };
    document.addEventListener('click', (e) => {
      const t = e.target.closest('[data-toggle],[data-open],[data-close],[data-set],[data-call]');
      if (!t) return;
      const { toggle, open, close, set, call } = t.dataset;
      if (call) actions[call]?.(e);
      if (toggle) state[toggle] = !state[toggle];
      if (open) state[open] = true;
      if (close) state[close] = false;
      if (set) { const [k, v] = pair(set); state[k] = v; }
      sync();
    });
    sync();
  })();
</script>

/* theme.css — brand color #4f46e5 for Bootstrap 5.3 */
:root { --brand: #4f46e5; --brand-hover: #433cc3; --brand-rgb: 79, 70, 229; --brand-contrast: #ffffff; }
.btn-brand {
  --bs-btn-color: var(--brand-contrast); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--brand-contrast); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-color: var(--brand-contrast); --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.text-brand { color: var(--brand) !important; }
.border-brand { border: 2px solid var(--brand) !important; }
.bg-brand-subtle { background-color: rgba(var(--brand-rgb), .12) !important; }
.form-control:focus, .form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.overlay { background: rgba(15, 23, 42, .5); backdrop-filter: blur(4px); z-index: 1050; }
.choice[aria-pressed="true"] { border-color: var(--brand) !important; color: var(--brand) !important; box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .2); }
.mw-sm { max-width: 24rem; } .mw-md { max-width: 28rem; } .mw-lg { max-width: 32rem; } .mw-xl { max-width: 36rem; }
.mw-2xl { max-width: 42rem; } .mw-4xl { max-width: 56rem; } .mw-6xl { max-width: 72rem; }