Mutually exclusive <details> elements
details 要素の name 属性に同じ値を設定すると、グループ内で排他的な開閉（アコーディオン）動作を実現できます。
概要
details 要素の name 属性に同じ値を設定すると、グループ内で排他的な開閉（アコーディオン）動作を実現できます。
対応ブラウザ
デスクトップ
Chrome 120+
Edge 120+
Safari 17.2+
Firefox 130+
モバイル
Chrome Android 120+
Safari iOS 17.2+
Firefox Android 130+
基本構文
HTML
<details name="faq">
<summary>質問1</summary>
<p>回答1の内容</p>
</details>
<details name="faq">
<summary>質問2</summary>
<p>回答2の内容</p>
</details>実務での使いどころ
-
Mutually exclusive <details> elements の活用
details要素のname属性。排他的アコーディオンを実現する属性。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。