height: auto animation — three techniques, live

<div class="pg">
    <h1 class="pg-title">📏 Three ways to animate an FAQ panel open</h1>
    <p class="pg-sub">
      Pick a technique, flip to the "long answer," and click the panel. Watch what actually
      happens to the content — not just whether it moves, but whether it <em>lies</em> to you.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Technique</div>
      <div class="seg" role="group" aria-label="Animation technique">
        <button data-mode="maxheight" aria-pressed="true">max-height: 150px guess</button>
        <button data-mode="js" aria-pressed="false">JS scrollHeight</button>
        <button data-mode="native" aria-pressed="false">interpolate-size (native)</button>
      </div>

<div class="btn-row" style="margin-top:14px">
        <label class="toggle">
          <input type="checkbox" id="longContent" /><span class="switch"></span>
          <span>long answer (taller than the 150px guess)</span>
        </label>
      </div>

<div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="bug">Preset: the classic bug</button>
        <button class="btn sm" data-preset="fix">Preset: the fix</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> The panel</div>
      <div class="faq" id="faqWrap">
        <button class="faq-q" id="faqBtn" aria-expanded="false">
          <span>Do you offer refunds?</span><span class="chev">▾</span>
        </button>
        <div class="faq-a mode-maxheight" id="panel">
          <div class="faq-a-inner" id="content"></div>
        </div>
      </div>

<div class="status" id="status" style="margin-top:14px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — click the question above to open it.</span>
      </div>
      <p class="hint" id="hint">Pick a technique on the left first, then click the panel.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> What your own browser just did</div>
      <div class="banner info show" id="supportNote"></div>
      <p class="hint">
        This isn't simulated — the "native" mode really sets <code>height: auto</code> with
        <code>interpolate-size: allow-keywords</code>. Whether it animates or snaps depends on
        which engine is rendering this page right now.
      </p>
    </div>
  </div>

preview

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