details要素

この要素に非対応の環境では、最初から内容が開かれた状態で表示されます。

属性

属性 作用
open 詳細を表示しているかどうかを示す。属性があれば表示され、なければ非表示
name 複数のdetailsを関連づける。同名のdetailsは1つしか表示されず、他方を開けば現在のものは閉じられる

summary要素

summary要素はdetails要素を展開するための、概要を示すラベルを定義します。<summary>: 概要明示要素 - HTML | MDN

これを省略するとUser-Agentによって定義された既定の文字列が用いられ、典型的に英語環境では"Details"、日本語環境では”詳細”となります。

<details></details>

使用例

<details>
    <summary>概要</summary>
    詳細
</details>

"概要"をクリックすることで、詳細を開閉できます。

概要 詳細

name属性

<details name="sample">
    <summary>概要1</summary>
    詳細1
</details>
<details name="sample">
    <summary>概要2</summary>
    詳細2
</details>
<details name="sample">
    <summary>概要3</summary>
    詳細3
</details>

"概要"をクリックすることで、詳細を開閉できます。

概要1 詳細1
概要2 詳細2
概要3 詳細3

参考

HTMLの情報サイトから、まとめて検索