details 要素折りたたみメニューを表す
details 要素は閲覧者が操作可能な、開閉式のウィジットを表します。所謂、折りたたみメニューが簡単に作成できます。また、open 属性によって最初から開いた状態を指定することも可能です。
対応ブラウザであれば、下記に開閉式メニューが表示ます。
details 要素の仕様
- カテゴリ
- コンテンツモデル
-
最初の子要素として summary 要素が 1つ必須
- この要素を使用できる文脈
フロー・コンテンツが期待される場所
- この要素で使用できる属性
詳細説明
open 属性
open 属性が指定されると、ページ読み込み時に初期状態で details 要素の内容を表示します。open 属性は論理属性です。
details 要素のサンプルソース
<details open="open"> <summary>コンテンツメニュー</summary> <details> <summary>HTML</summary> <ul> <li><a href="/html5/tag.html">HTML5 タグリファレンス</a></li> <li><a href="/html5/info.html">HTML5 の基礎知識</a></li> <li><a href="/html5/link.html">HTML5 に関するリンク集</a></li> </ul> </details> <details> <summary>CSS</summary> <ul> <li><a href="/css/tag.html">CSS リファレンス</a></li> <li><a href="/css/info.html">CSS の基礎知識</a></li> <li><a href="/css/link.html">CSS に関するリンク集</a></li> </ul> </details> </details>
主要ブラウザの対応
| IE11 | × |
|---|---|
| Edge（EdgeHTML） | × |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |