結論
FAQやヘルプページのように、開閉さえできれば十分なアコーディオンなら <details> と <summary> から検討してください。JavaScriptを1行も書かずに開閉が動き、ブラウザのページ内検索（Ctrl+F）が閉じた項目の中身までヒットさせて自動で展開してくれます。これは自作アコーディオンでは追加実装が必要な挙動です。
一方で、開閉にスムーズな高さアニメーションを付けたいなら、2026年7月時点ではまだ自作アコーディオンに分があります。<details> 側にも ::details-content と interpolate-size を組み合わせるアニメーション手法がありますが、この記事を書いている時点では interpolate-size がChromium系ブラウザにしか実装されておらず、SafariとFirefoxでは開閉が一瞬で切り替わる（アニメーションしない）状態です。
アニメーションが要らないなら details/summary、ブラウザを問わず滑らかに開閉させたいなら自作。判断軸はこの一点に尽きる。
両方の動くデモ
下の2つを実際に開閉してみてください。左は <details>、右は div + JavaScriptの自作版です。見た目はほぼ揃えていますが、開閉時の動き方が違います。
- 追加のJavaScriptなし
- 開閉は即座に切り替わる
- ページ内検索で自動展開
このサービスは無料で使えますか？
基本機能はすべて無料でご利用いただけます。プレミアムプランでは追加のストレージと優先サポートが含まれます。
アカウント登録は必要ですか？
閲覧はアカウントなしでも可能です。コンテンツを保存・投稿する場合はアカウント登録が必要です。
解約はいつでも可能ですか？
はい、いつでも解約できます。解約後はプレミアム機能が使えなくなりますが、投稿データは保持されます。
- max-heightトランジションで実装
- 全ブラウザで滑らかに開閉
- ページ内検索は自力対応が必要
基本機能はすべて無料でご利用いただけます。プレミアムプランでは追加のストレージと優先サポートが含まれます。
閲覧はアカウントなしでも可能です。コンテンツを保存・投稿する場合はアカウント登録が必要です。
はい、いつでも解約できます。解約後はプレミアム機能が使えなくなりますが、投稿データは保持されます。
ブラウザで Ctrl+F（Macは⌘+F） を押して「ストレージ」と検索してみてください。左の <details> 版は閉じたままでもマッチし、該当項目が自動で開きます。右の自作版は開いている項目の中しか検索対象にならず、閉じた項目の中身は見つかりません。これが2つの決定的な違いです。
比較表
実装で差が出る項目を並べます。「アニメーション」と「ページ内検索」の2行が、この記事の判断軸に直結します。
| 項目 | details/summary（標準機能） | 自作アコーディオン（div + JS） |
|---|---|---|
| 開く／閉じるの基本 | summary クリックでブラウザが自動処理。JS不要 |
クリックイベントを監視し、状態とスタイルを自分で切り替える |
| 開閉アニメーション | 即座に切り替わる。滑らかな高さアニメーションはinterpolate-size頼みで現状Chromium系のみ |
max-height トランジションで全ブラウザ同じ挙動を作れる |
| ページ内検索（Ctrl+F） | 閉じた項目の中身もマッチし、該当項目が自動で開く（標準挙動） | 開いている項目しか検索対象にならない。自力対応は困難 |
| 排他制御（1つだけ開く） | name 属性を同じ値にするだけで実現できる（JS不要） |
クリック時に他の項目を閉じる処理を自分で書く |
| アクセシビリティ | summary がボタンとして扱われ、開閉状態もブラウザが管理する |
aria-expanded の付与・更新を自分で担保する |
| スタイリングの自由度 | 三角マーカーのリセットなど独特の作法が要る。中身は自由 | 最初から素の div なので完全に自由 |
| ブラウザ対応 | Chrome・Edge・Firefox・Safariの現行版すべてで基本機能は対応済み | 普通のDOM操作なので対応の心配は基本的にない |
| 実装量の目安 | マークアップのみ。JS 0行 | 開閉・アイコン切替・排他制御まで含めると数十行 |
details/summaryがJavaScriptなしで持っている挙動
<details> は summary をクリックすると open 属性が自動で付いたり外れたりします。CSSでは details[open] セレクターで展開時のスタイルを制御できます。
<details>
<summary>このサービスは無料で使えますか？</summary>
<p>基本機能はすべて無料でご利用いただけます。</p>
</details>
<style>
/* 展開中だけスタイルを変える */
details[open] summary {
color: #1d4ed8;
}
</style>
排他制御（1つ開くと他が閉じる）も、複数の <details> に同じ name 属性を付けるだけで実現できます。ラジオボタンの排他選択と同じ仕組みで、JavaScriptは不要です。
<details name="faq-group"> <summary>通知設定</summary> <p>…</p> </details> <details name="faq-group"> <summary>プライバシー設定</summary> <p>…</p> </details>
そしてこの記事でいちばん重要な違いが、ブラウザのページ内検索（Ctrl+F）との連携です。<details> が閉じていても、中身のテキストは検索対象に含まれます。マッチした項目がある場合、ブラウザは自動でその <details> を開いて見せてくれます。自作アコーディオンで同じことをするには、検索APIをフックする方法がなく、事実上対応できません。FAQページやマニュアルページのように「後から検索して見つける」使われ方をするコンテンツでは、この差がそのままユーザー体験の差になります。
見た目のカスタマイズでは、デフォルトの三角マーカーを消す作業が最初のハードルになります。
/* デフォルトの開閉マーカーを消して独自アイコンに差し替える */
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }
開閉アニメーションをdetailsに付ける場合
「JS不要」を活かしたまま開閉アニメーションを付ける方法として、::details-content 疑似要素と interpolate-size プロパティを組み合わせる書き方が登場しています。
details {
interpolate-size: allow-keywords;
}
details::details-content {
height: 0;
overflow: hidden;
transition: height 0.3s ease, content-visibility 0.3s allow-discrete;
}
details[open]::details-content {
height: auto;
}
この書き方自体は現行のChrome・Edgeで動きます。ただし核心となる interpolate-size（height: 0 から height: auto への遷移を可能にするプロパティ）は、この記事を書いている2026年7月時点でSafariとFirefoxに実装されていません。::details-content 自体の対応は主要ブラウザで進んでいますが、高さの滑らかな遷移だけはChromium系だけの挙動になります。つまり、SafariやFirefoxのユーザーには「アニメーションなしで即座に開閉するdetails」として見えます。
details単体でのアニメーションはprogressive enhancementの範囲。全ブラウザで同じ滑らかさを保証したいなら、今はまだ自作のmax-heightトランジションに軍配が上がる。
自作アコーディオンで作り込めること
このサイトのアコーディオンの実装サンプル（FAQ・排他制御）の事例は、max-height トランジションで開閉アニメーションを作り込んだ自作版です。開くときは body.scrollHeight + 'px' を max-height に設定し、閉じるときは '0' を設定することで、ブラウザを問わず同じ滑らかさの開閉が得られます。
排他制御も data-exclusive="true" 属性1つで切り替えられるようにしてあり、開こうとしたタイミングで他の項目を閉じる処理をJSで挟んでいます。<details name="..."> による排他制御と役割は同じですが、自作なら開閉の速度やイージングまで自由に調整できるのが違いです。
一方で、ページ内検索との連携や aria-expanded の管理は、この事例でもすべて自前で書いています。標準機能ならブラウザに任せられる部分を、自作では最後まで自分で面倒を見る必要がある、というのは前の記事（dialog要素と自作モーダルの比較）でも触れた構図と同じです。
業務アプリでの選び方
ここまでを踏まえて、実際の判断軸を挙げます。
FAQ・マニュアル・ヘルプ系は details/summary
開閉さえできれば要件を満たし、かつ「後から検索して見つける」使われ方が多いコンテンツです。ページ内検索で自動展開される恩恵が大きく、JSを書かずに済む分バグの温床も減ります。
ダッシュボードの設定パネルなど演出込みのUIは自作
開閉の滑らかさが操作感に直結する画面や、既存のデザインシステム・状態管理に統合したい場合は自作に寄せます。全ブラウザで同じアニメーションを保証したいなら、この記事の時点ではまだ自作の max-height トランジションが確実です。
なお、両者は排他アコーディオン内で共存させる必要はありません。同じページの異なるセクションで、FAQ部分はdetails、操作パネル部分は自作、という使い分けも十分成立します。
まとめ
details/summaryは、追加のJavaScriptなしで開閉・排他制御・ページ内検索対応まで手に入る標準機能です。とくにページ内検索との連携は自作では再現しづらく、FAQやマニュアルのようなコンテンツでは無視できない差になります。
ただし開閉アニメーションは発展途上で、2026年7月時点では滑らかな高さ遷移がChromium系ブラウザに限られます。全ブラウザで同じ滑らかさが要るなら自作のmax-heightトランジションを選び、アニメーションが要らないなら標準機能から検討する。これが現時点での現実的な線引きです。自作でどこまで作り込むかの具体例は、下の動くサンプルで確認できます。