<details>要素

<details>要素の定義

英語で「詳細」を表す”detail”の複数形。
ウィジェットが open 状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは <summary> 要素を使用して提供することができます。
折りたたみウィジェットはふつう、回転して開閉状態を示す小さな三角形を使用し、その隣のラベルと共に画面上に表現されます。 <details> 要素の最初の子要素が <summary> の場合は、 <summary> 要素が折りたたみウィジェットのラベルとして使用されます。

子要素として使えるもの

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

親要素として使えるもの

フローコンテンツを受け入れるすべての要素。

許可されているARIAロール

なし

DOMインターフェース

HTMLDetailsElement

属性

グローバル属性が指定できます。

open

論理属性で、ページ読み込み時に詳細内容、つまり <details> 要素の内容が表示されるよう指定するものです。既定値は false であり、詳細内容は表示しません。

サンプル

See the Pen details by Masahiko Iwakiri (@m-iwakiri) on CodePen.