Missed HTML: details

<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>

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>