details要素

details要素はHTML5から新たに追加された要素です。

ディスクロージャーウィジェットとして機能する要素で、summary要素と組み合わせて用います。

open属性を持たない場合は、summary要素以外のコンテンツが表示されず、持つ場合はsummary要素以外が表示されます。

open属性は、details要素の子要素であるsummary要素を押下することでつけはずしの切り替えが実施されます。

使用例

<details>

<summary>概要テキスト</summary>



詳細テキスト詳細テキスト詳細テキスト

</details>

使用可能な属性

• 全てのグローバル属性
• open属性

コンテンツカテゴリ

• フローコンテンツ
• セクショニングルート
• インタラクティブコンテンツ
• パルパブルコンテンツ

子要素にしていい要素の種類

• 1つのsummary要素に続くフローコンテンツ

親要素にしていい要素の種類

• フローコンテンツが期待されているすべての要素

仕様書と策定状況