Simple Tree

Simple collapsible tree in pure CSS without using JS and images.

Demo

http://psnet.github.io/simple-tree/demo/

Part of the code from the demo:

<ul class="simple-tree">
  <li>
    <input type="checkbox" checked="checked" id="simple-tree-item-1" />
    <label for="simple-tree-item-1">Folder</label>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
  <li>
    <input type="checkbox" checked="checked" id="simple-tree-item-2" />
    <label for="simple-tree-item-2">Folder</label>
    <ul>
      <li>
        <input type="checkbox" checked="checked" id="simple-tree-item-3" />
        <label for="simple-tree-item-3">Folder</label>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>

Connection

• Include CSS file
• Create html code using the demo code example

License

(P) PSNet 2014

Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)