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

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

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

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

使用例

<details>

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



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

</details>

使用可能な属性

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

コンテンツカテゴリ

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

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

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

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

仕様書と策定状況

仕様書 策定状況
W3C 勧告
WHATWG Living Standard
最終更新:2018年1月18日

ミツエーリンクスでは、デジタルメディアにおける企業と顧客とのコミュニケーション課題を解決する、さまざまなサービスをご提供しています。ぜひ一度サービスページをご覧ください。

関連情報