filetree BETA


Add to your HTML:

<link rel="stylesheet" href="<DIRECTORY>/filetree.css" type="text/css"/>

<script src="<DIRECTORY>/filetree.js"></script>

This plugins also requires jQuery and Font Awesome.
You can change the icons using another unicode on attribute content on filetree.css

Go to example


The filetree that will be displayed on page load:

<ul class="main-tree"></ul>

The title of the filetree:

<li class="tree-title">title</li>

This is the item of the filetree:

<li class="tree-item">title</li>

Example of code:

<ul class="main-tree"> <li class="tree-title">photos-2015</li> <ul class="tree"> <li class="tree-title">beach</li> <li class="tree-item">0-2015-01-01.jpg</li> <li class="tree-item">1-2015-01-02.jpg</li> <li class="tree-item">2-2015-01-03.jpg</li> </ul> <ul class="tree"> <li class="tree-title">disneyland</li> <li class="tree-item">3-2015-02-01.jpg</li> <li class="tree-item">7-2015-02-02.jpg</li> <li class="tree-item">8-2015-02-03.jpg</li> <ul class="tree"> <li class="tree-title">birthday party</li> <li class="tree-item">4-2015-02-01.jpg</li> <li class="tree-item">5-2015-02-01.jpg</li> <li class="tree-item">6-2015-02-01.jpg</li> </ul> </ul> </ul>

Example with multiples filetrees

  • photos-2015
    • beach
    • 0-2015-01-01.jpg
    • 1-2015-01-02.jpg
    • 2-2015-01-03.jpg
    • disneyland
    • 3-2015-02-01.jpg
    • 7-2015-02-02.jpg
    • 8-2015-02-03.jpg
      • birthday party
      • 4-2015-02-01.jpg
      • 5-2015-02-01.jpg
      • 6-2015-02-01.jpg
  • projects
    • nearby
      • css
      • animations.js
      • google-maps.js
      • main.js
      • mobile.js
      • js
      • google-maps.js
      • main.js
      • resources
      • favicon.ico
    • index.html
  • movies
  • interstellar.mp4
  • catch_me_if_you_can.mp4
  • psycho.mp4