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!