<details>と<summary>は、ネイティブディスクロージャウィジェットを作成します — 展開可能/折りたたみ可能なセクション — ゼロJavaScriptで。ブラウザがトグル、キーボードサポート、アクセシビリティを処理します。
html
Click to expand
This content is hidden until the user opens it.
<summary> はクリック可能なラベル(最初の子要素)です。<details open> <!-- starts expanded -->
<summary>FAQ item</summary>
<p>Answer...</p>
</details>
const d = document.querySelector("details");
d.open; // boolean: is it open?
d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close
summary { cursor: pointer; }
summary::marker { color: blue; } /* the triangle/arrow */
details[open] summary { font-weight: bold; } /* style when open */
FAQアコーディオン、"もっと表示"セクション、折りたたみ可能なサイドバー、スポイラーテキスト、展開可能なテーブル行。この要素の前は、すべてのアコーディオンがJavaScriptとアクセシビリティ用のARIAワイアリングが必要でした — 今は2つのセマンティックタグです。
<details>/<summary>は、JSもマニュアルARIAもなく、アクセス可能でキーボード対応の折りたたみ可能なコンテンツを提供します — プラットフォームを使用する完全な例です。
カスタムアコーディオンを作成する前に、FAQと"もっと表示"パターンに使用してください。