Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<details>

<details> は HTML の要素で、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは <summary> 要素を使用して提供する必要があります。

折りたたみウィジェットはふつう、回転して開閉状態を示す小さな三角形を使用し、その隣のラベルと共に画面上に表現されます。 <summary> 要素のコンテンツは、折りたたみウィジェットのラベルとして使用されます。 <details> のコンテンツは、 <summary> のアクセシブル説明を提供します。

テキスト・構造

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<details>
12
79
49
6
18
6
<summary>

は HTML の要素で、 details 要素の折りたたみボックスの要約、キャプション、説明、凡例を表します。 要素をクリックすると、親の 要素の開閉状態を切り替えることができます。
12
79
49
6
18
6
HTML 属性
open
12
79
49
6
18
6
display_list_item

表示：リスト項目
89
89
49
89
DOM API
HTMLDetailsElement

HTMLDetailsElement インターフェイスは、（継承によって利用できる通常の HTMLElement インターフェイスのもの以外の）details を操作するための特殊なプロパティを提供します。
10
79
49
6
18
6
open

open は HTMLDetailsElement インターフェイスのプロパティで、HTML の open 属性を反映するもので、details の中身（summary を除く）がユーザーに表示されているかを示す論理値です。
10
79
49
6
18
6
toggle_event

toggle は HTMLElement インターフェイスのイベントで、Popover_API要素（すなわち有効な popover 属性がある要素）において、表示または非表示になった直後に発行されます。
36
79
49
10.1
36
10.3
toggle_event (details elements)

詳細要素で `toggle` イベントが発生する
36
79
49
10.1
36
10.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Firefox 57 より前のバージョンでは、`<details>` 要素に CSS の `animation` が有効になっている場合、`open` 属性を使用してデフォルトで開くことができないというバグがありました。

基本構文

HTML 
<details>
  <summary>View Details</summary>
  <p>Hidden content goes here.</p>
</details>

<details open>
  <summary>Open by default</summary>
  <p>You can use the `open` attribute to set the initial state to open.</p>
</details>

ライブデモ

FAQ アコーディオン

details + summary でJavaScript不要のアコーディオンUIを作成。HTML を編集して質問を追加してみてください。

プレビュー全画面表示

設定パネル

open 属性で初期状態を開いた状態にできます。フォーム要素との組み合わせ例。

プレビュー全画面表示

name 属性でアコーディオン

同じ name 属性を持つ details は排他的に開閉します（1つだけ開く）。

プレビュー全画面表示

実務での使いどころ

  • <details> の活用

    <details> は HTML の要素で、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。

注意点

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

アクセシビリティ

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

参考リンク