filetree

this shit rules. only because its so simple yet powerful. elegant.

by Victor

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css">
<ul class="topLayer">
  <li>
      <span><span class="fa fa-chevron-down"></span>first level</span>
      <ul>
          <li>stuff</li>
          <li>stuff</li>
          <li>
              <span><span class="fa fa-chevron-down"></span>second layer</span>
              <ul>
                  <li>item</li>
                   <li>item</li>
                   <li>
                       <span><span class="fa fa-chevron-down"></span>third layer</span>
                       <ul>
                           <li>item</li>
                            <li>item</li>
                            <li>item</li>
                            <li>
                                <span><span class="fa fa-chevron-down"></span>fourth layer</span>
                       <ul>
                           <li>item</li>
                            <li>item</li>
                            <li>item</li>
                            <li>item</li>
                       </ul>
                            </li>
                       </ul>
                   </li>
              </ul>
          </li>
      </ul>
  </li>
      <li>
      <span><span class="fa fa-chevron-down"></span>first level</span>
      <ul>
          <li>stuff</li>
          <li>stuff</li>
          <li>
              <span><span class="fa fa-chevron-down"></span>second layer</span>
              <ul>
                  <li>item</li>
                   <li>item</li>
                   <li>
                       <span><span class="fa fa-chevron-down"></span>third layer</span>
                       <ul>
                           <li>item</li>
                            <li>item</li>
                            <li>item</li>
                            <li>
                                <span><span class="fa fa-chevron-down"></span>fourth layer</span>
                       <ul>
                           <li>item</li>
...

SCSS

@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,300);
body {
    font-family:'Quicksand';
}
span.fa.fa-chevron-down {
    color:#3498DB;margin-left: -8px;
    padding:0;
}
ul {
    padding-left:2px;
}
ul.topLayer > li {
    background:none !important;
}
li {
    padding: 0;
    padding-left: 13px;
    border-left:1px solid black;
    background:...

JavaScript

//set the stage
$(".topLayer li ul").slideUp(0);

//go time
$(' .topLayer li ').click(function(e){
    //check if it has lists inside or not
    if ($(this).children('ul').length === 0) {
        //alert('single item yo!');
        
        //TODO: a way to close the toplayers when you click a diff
        // ie one tree at a time
        
        /* this is an addon for selections
        if done right it can eliminate or assist in
        radios and checks */
        //remove the last helper
        $('.selected').removeClass('selected');
        //add the helper
       $(this).toggleClass('selected');
        
    } else {
        //helper class
        $(this).toggleClass('openList')
        //open the lists inside
        $(this).children('ul').slideToggle(200);
        
    };//end else
    
    //stop the bubbles!!!
    e.stopPropagation();
});