I write stuff. sometimes.

Missed HTML: details

The details tag is often overlooked and reinvented.

<details>

The <details> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <summary> element. - MDN

HTML

<details>
<summary>Detail</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</details>
<details>
<summary>Detail2</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</details>
DetailLorem ipsum dolor sit amet, consectetur adipiscing elit.
Detail2Lorem ipsum dolor sit amet, consectetur adipiscing elit.

And with a little css and nesting.

<style>
details.css summary:hover,
details.css li:hover
{
color: blue;
}
details.css {
cursor: pointer;
}
details.css > details {
margin-left: 12px;
}
details.css > details > details {
margin-left: 24px;
}
details.css ul {
margin: 0;
}
</style>

<details class="css">
<summary>Root</summary>
<details>
<summary>Dir</summary>
<details>
<summary>file list</summary>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</details>
</details>
</details>
Root
Dir
file list
  • a
  • b
  • c