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>

Detail

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Detail2

Lorem 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