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
api.HTMLDetailsElement.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>

ライブデモ

exclusiveaccordion

same name attribute has details is 1 onlyOpenexclusivebehavior to.

プレビュー全画面表示

sectiontoggle

Name attribute in settingspanel. tab styletoggle realize.

プレビュー全画面表示

Name with / none. comparison

behavior. Difference line upconfirm. with Name attribute. none.

プレビュー全画面表示

実務での使いどころ

  • Mutually exclusive <details> elements の活用

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

注意点

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

アクセシビリティ

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

参考リンク