<details>は概要に対する詳細を記述するHTMLタグです。details要素の使い方をサンプルを交えてご紹介します。
HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。details 要素の終了タグは省略できない。
<details>
<!-- one summary element followed by flow content -->
</details>
<DETAILS>
<!-- one summary element followed by flow content -->
</DETAILS>
details 要素の開始タグと終了タグの間には、ひとつの summary 要素と、それに続くフロー・コンテンツを含めることができる。
次に示す属性をdetails要素に指定できる。
値 | 説明 |
---|---|
true | 初期状態で詳細を表示する |
false | 初期状態で詳細を表示しない(デフォルト値) |
属性名だけ指定して、属性値を指定しない場合は、true を指定したことになる。
概要(summary)の部分をクリックすると、詳細(details)を表示したり、隠したりできる。
<details open>
<summary>HTML</summary>
<ol>
<li>要素</li>
<li>属性</li>
</ol>
</details>
JavaScriptからは HTMLDetailsElement インタフェースを通じて details 要素へアクセスできる。
プロパティ | 型 | 説明 |
---|---|---|
accessKey | string | accessKey属性 |
isContentEditable | boolean | この要素が編集できるかどうか(読取り専用) |
dataset | DOMStringMap | カスタムデータ属性 |
dir | string | dir属性 |
draggable | boolean | draggable属性 |
innerText | string | ノードに描画されるテキスト |
lang | string | lang属性 |
open | boolean | open属性 |
style | string | style属性 |
tabIndex | number | tabIndex属性 |
title | string | title属性 |
Web Hypertext Application Technology Working Group (2022) Interactive elements HTML Living Standard