File Tree

by LimitedWard

HTML

<div class="tree">
    <ul>
        <li> <a href="#">Item 1</a>

        </li>
        <li class="folder">Folder 1
            <div class="subtree">
                <ul>
                    <li> <a href="#">Sub Item 1</a>
    
                    </li>
                    <li class="folder">Sub Folder 1
                        <div class="subtree">
                            <ul>
                                <li> <a href="#">Sub Item 1</a>
        
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li> <a href="#">Sub Item 2</a>
    
                    </li>
                </ul>
            </div>
        </li>
        <li> <a href="#">Item 2</a>

        </li>
    </ul>
</div>

CSS

div.tree {
    font-family:"Courier New", Courier, monospace;
    font-size:12px;
    -moz-user-select : none;
    -khtml-user-select : none;
    -webkit-user-select : none;
    -o-user-select : none;
    user-select : none;
    background:rgba(0,0,0,0.6);
    color:#fff;
    padding:5px;
    border-radius:5px;
    box-shadow:1px 1px 5px rgba(0,0,0,0.5) inset;
    text-shadow:1px 1px 5px rgba(0,0,0,1);
    width:300px;
}
div.tree ul {
    list-style-type:none;
    padding:0;
    margin:0;
    position:relative;
}
div.subtree {
    /*margin-left:20px;
    margin-top:5px;*/
    display:none;
    position:relative;
}
div.tree ul ul {
    left:20px;
    top:5px;
    position:relative;
    display:inline-block;
    
}
div.tree ul ul::before {
    height:100%;
    width:4px;
    color:#fff;
    content:"";
    float:left;
    left:-16px;
    position:absolute;
    /*background:rgba(0,255,0, 0.1);*/
    box-shadow:1px 1px 5px rgba(0,0,0,0.5) inset;
    border-radius:2px;
}
div.tree li {
    margin-top:5px;
    padding:0;
    cursor:pointer;
}
div.tree li:first-child {
    margin-top:0;
}
div.tree a {
    text-decoration:none;
    color:#fff;
}
div.tree li:before {
    height:16px;
    width:16px;
    color:#fff;
    content:"";
    float:left;
    margin-right:5px;
    background:url('http://www.thecssninja.com/demo/css_tree/document.png') no-repeat;
}
div.tree li.folder {
}
div.tree li.folder:before {
    background:url('http://www.thecssninja.com/demo/css_tree/folder-horizontal.png') no-repeat;
}
div.tree li.folder.open:before {
    background:url('http://cdn1.iconfinder.com/data/icons/musthave/16/Folder.png') no-repeat;
}

JavaScript

$(document).ready(function () {
    $('div.tree li.folder').click(function (e) {
        e.stopPropagation();
        if ($(this).hasClass('open')) {
            $(this).find('> div.subtree').slideUp(2000);
//            $(this).find('> ul:before').slideUp(200,200);
            $(this).removeClass("open");
        } else {
            $(this).find('> div.subtree').slideDown(2000);
//            $(this).find('> ul:before').slideDown(200,200);
            $(this).addClass("open");
        }
    });
});