CSS3 Javascript Tree

tree.css.scss

@import 'font-awesome';

.tree {
  margin-top: 30px;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.4);
  overflow: auto;
  min-height: 400px;
  li {
    list-style-type: none;
    padding: 10px 5px 0 5px;
    position: relative;
    span {
      border: 1px solid #999;
      border-radius: 5px;
      display: inline-block;
      padding: 3px 8px;
      text-decoration: none;
    }

    &.parent_li > span {
      cursor: pointer;

      &:before {
        @extend .fa;
        @extend .fa-plus;
      }
    }
    &.collapsed > span:before {
      @extend .fa-minus;
    }
  }
}

.tree li::before, .tree li::after {
  content: '';
  left: -20px;
  position: absolute;
  right: auto;
}

.tree li::before {
  border-left: 1px solid #999;
  bottom: 50px;
  height: 100%;
  top: 0px;
}

.tree li::after {
  border-top: 1px solid #999;
  top: 25px;
  width: 25px
}

.tree > ul > li::before, .tree > ul > li::after {
  border: 0
}

.tree li:last-child::before {
  height: 25px
}

.tree li.parent_li > span:hover, .tree li.parent_li > span:hover + ul li span {
  background: #eee;
  border: 1px solid #94a0b4;
  color: #000
}

tree.html.haml

.tree.list
  %ul
    %li
      %span
        Child
      %ul
        %li
          %span
            Grand Child
    %li
      %span
        Child
      %ul
        %li
          %span
            Grand Child
        %li
          %span
            Grand Child
          %ul
            %li
              %span
                Great Grand Child
              %ul
                %li
                  %span
                    Great great Grand Child
                %li
                  %span
                    Great great Grand Child
            %li
              %span
                Great Grand Child
            %li
              %span
                Great Grand Child
        %li
          %span
            Grand Child

tree.js.coffee

$(document).ready ()->
  $('.tree li:has(ul)').addClass('parent_li')
  $('.tree li.parent_li > span').on 'click', (e)->
    e.preventDefault()
    $(this).parent('li.parent_li').toggleClass('collapsed').find(' > ul > li').slideToggle('fast')

Almost as seen on http://stackoverflow.com/questions/11167628/trees-in-twitter-bootstrap