Newly available 主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。

Mutually exclusive <details> elements

HTMLDetailsElement インターフェースの name プロパティは、<details> 要素の name 属性を反映します。これにより、複数の <details> 要素を互いに接続し、そのうちの1つだけを同時に開くことが可能になります。開発者はスクリプトを使用せずに、アコーディオンのような UI 機能を簡単に作成できます。

name 属性はグループ名を指定します — 複数の <details> 要素に同じ name 値を与えることで、それらをグループ化します。グループ化された <details> 要素のうち、一度に開くことができるのは1つだけです — 1つを開くと、別のものが閉じます。複数のグループ化された <details> 要素に open 属性が与えられた場合、ソース順で最初のものだけが開いた状態で描画されます。

テキスト・構造

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
name
120
120
130
17.2
120
17.2
HTML 属性
name
120
120
130
17.2
120
17.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<details name="faq">
  <summary>Question 1</summary>
  <p>Content of Answer 1</p>
</details>
<details name="faq">
  <summary>Question 2</summary>
  <p>Content of Answer 2</p>
</details>

ライブデモ

排他的アコーディオン

同じ name 属性を持つ details は1つだけ開く排他的動作に。

プレビュー全画面表示

セクション切り替え

name 属性で設定パネルのタブ風切り替えを実現。

プレビュー全画面表示

name あり・なしの比較

name 属性の有無による動作の違いを並べて確認。

プレビュー全画面表示

実務での使いどころ

  • Mutually exclusive <details> elements の活用

    HTMLDetailsElement インターフェースの name プロパティは、<details> 要素の name 属性を反映します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク