HTML

Interactive demo

1. root
1.1 images
1.1.1 source
  • one.xcf
  • two.xcf
  • one.jpg
  • two.jpg
1.2 images
  • three.jpg
  • four.jpg

The Code

HTML

<details open>
  <summary>root</summary>
  <details>
  <summary>images</summary>
    <ul>
      <li>one</li>
      <li>two</li>
    </ul>
  </details>
</details>

CSS

details details {
    margin-left: 1rem
}

Très simple!