モダンCSS・プラットフォーム
ネイティブ開閉アニメ（details）
HTMLの<details>だけで、中身がふわっと高さアニメーションしながら開閉する。::details-contentとcalc-size()でJSなしのアコーディオン。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
HTML標準の<details>を、::details-content 疑似要素と calc-size()（interpolate-size: allow-keywords）で高さアニメーションさせる例です。JavaScriptによる高さ計測が不要になります。::details-content と height:auto へのトランジションは新しめのブラウザで有効で、未対応環境では<details>本来の「瞬時に開閉」へフォールバックするため機能は壊れません。
コード（コピーして使えます）
<div class="dd-wrap">
<details class="dd" open>
<summary>配送について<span class="dd-mark" aria-hidden="true">＋</span></summary>
<div class="dd-content">全国翌日配送に対応しています。離島・一部地域は2〜3日かかる場合があります。</div>
</details>
<details class="dd">
<summary>返品・交換<span class="dd-mark" aria-hidden="true">＋</span></summary>
<div class="dd-content">お届けから14日以内であれば、未使用品に限り返品・交換を承ります。</div>
</details>
<details class="dd">
<summary>支払い方法<span class="dd-mark" aria-hidden="true">＋</span></summary>
<div class="dd-content">クレジットカード・各種QR決済・コンビニ後払いに対応しています。</div>
</details>
</div>