webmas.jp

<details> は詳細内容の展開と折りたたみ（表示非表示）を切り替えるボックスを作ることができます。概要やラベルなどに使用することができます。

詳細が折りたたまれている状態。Microsoft Edge や Safari の場合特にスタイル等が指定されていなければ文字列の左横に右向きの三角形が表示されています。

文字をクリックすると詳細が表示され下向き三角形に変化します。

分類

フローコンテンツ、区分化ルート、対話型コンテンツ、知覚可能コンテンツ

内包できるもの

1つの <summary> 要素と、それに続く フローコンテンツ

属性

open

ページ読み込み時展開状態にする

<details open></details>

サンプル

<details> 要素内に <summary> 要素を配置すると文字を変更することができます。<summary> を指定しなかった場合は「詳細」が自動的に配置されます。

HTML （折りたたみ）

<details>
<summary>詳細を表示</summary>
<p>詳細の内容</p>
</details>

プレビュー

HTML (展開　open を指定）

<details open>
<summary>詳細を表示</summary>
<p>詳細の内容</p>
</details>

プレビュー