この要素に非対応の環境では、最初から内容が開かれた状態で表示されます。
<details>
<summary>概要</summary>
詳細
</details>
"概要"をクリックすることで、詳細を開閉できます。
| 属性 | 作用 |
|---|---|
| open | 詳細を表示しているかどうかを示す。属性があれば表示され、なければ非表示 |
| name | 複数のdetailsを関連づける。同名のdetailsは1つしか表示されず、他方を開けば現在のものは閉じられる |
<details open="open">
<summary>概要</summary>
詳細
</details>
これは論理属性のため、open="false"とすると表示されます。
この属性の値が変化するとき、HTMLElementではtoggleイベントが発生します。 HTMLElement: toggle event - Web APIs | MDN HTMLDetailsElement - Web APIs | MDN
<details name="sample">
<summary>概要1</summary>
詳細1
</details>
<details name="sample">
<summary>概要2</summary>
詳細2
</details>
<details name="sample">
<summary>概要3</summary>
詳細3
</details>
"概要"をクリックすることで、詳細を開閉できます。
name属性を設定しないと、複数のdetailsは連動しません。
"概要"をクリックすることで、詳細を開閉できます。
summary要素はdetails要素を展開するための、概要を示すラベルを定義します。<summary>: 概要明示要素 - HTML | MDN
これを省略するとUser-Agentによって定義された既定の文字列が用いられ、典型的には英語環境では"Details"、日本語環境では”詳細”となります。
<details></details>
