HTMLのみでTreeView UIをつくる

listitem要素とdetails要素を使うことで、HTMLだけでTreeView UIを実装できる。details要素のname属性を使うことで、排他的な開閉処理も可能だ。

<details>
  <summary>Root</summary>
  <ul>
    <li>System</li>
    <li>
      <details>
        <summary>Applications</summary>
        <ul>
          <li>Calendar.app</li>
          <li>Contacts.app</li>
          <li>Mail.app</li>
          ...
        </ul>
      </details>
    </li>
    ...
  </ul>
</details>

.treeview ul {
  list-style: none;
}

details > summary::marker {
  content: "(+) ";
}
details[open] > summary::marker {
  content: "(-) ";
}

デモ