Simple HTML tree

Feb ’19

HTML HTML5 KISS

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!