<details name> — native accordion playground

<div class="pg">
    <h1 class="pg-title">🎮 The one-attribute accordion</h1>
    <p class="pg-sub">
      Two FAQ groups below. Switch between the <code>name</code>-grouped native version and the
      hand-rolled JS-loop version, then try breaking the native one by reusing a group name.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> How the accordion is wired</div>
      <div class="seg" id="modeSeg" role="tablist">
        <button class="btn sm" data-mode="native" aria-pressed="true">Native <code>name</code> attribute</button>
        <button class="btn sm" data-mode="legacy" aria-pressed="false">Old way: JS loop</button>
      </div>
      <label class="toggle" style="margin-top:12px">
        <input type="checkbox" id="reuseName" /><span class="switch"></span>
        <span>Reuse the same group name for both FAQs (simulate a copy-paste bug)</span>
      </label>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" id="presetBug">Demo the cross-talk bug</button>
        <button class="btn ghost sm" id="resetBtn">Reset</button>
      </div>
      <p class="hint" id="modeHint">
        Native mode: the browser enforces "only one open" per group — no listener attached.
      </p>
    </div>

<div class="groups">
      <div class="acc-group" data-group="a">
        <h3>Group A — Pricing FAQ</h3>
        <details class="acc-item" data-group="a">
          <summary>What's your refund policy?</summary>
          <p>Full refund within 30 days, no questions asked.</p>
        </details>
        <details class="acc-item" data-group="a">
          <summary>Do you offer team plans?</summary>
          <p>Yes — per-seat pricing on the plans page.</p>
        </details>
        <details class="acc-item" data-group="a">
          <summary>Is there a free tier?</summary>
          <p>Yes, capped at 3 projects.</p>
        </details>
      </div>
      <div class="acc-group" data-group="b">
        <h3>Group B — Account FAQ</h3>
        <details class="acc-item" data-group="b">
          <summary>Can I cancel anytime?</summary>
          <p>Yes, effective end of the billing period.</p>
        </details>
        <details class="acc-item" data-group="b">
          <summary>How do I change my email?</summary>
          <p>Account settings → Profile → Email.</p>
        </details>
        <details class="acc-item" data-group="b">
          <summary>Can I export my data?</summary>
          <p>Yes, as CSV, from Settings → Export.</p>
        </details>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What's actually happening</div>
      <div class="status" style="margin-bottom:10px">
        <span class="dot" id="dot"></span><span id="statusText">Ready — open a panel in either group.</span>
      </div>
      <pre class="code" id="codeView"></pre>
      <div class="output log" id="log" style="margin-top:10px; max-height: 130px; overflow:auto;"></div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.

&lt;details name&gt; — native accordion playground

<details name> — native accordion playground