Folder Tree

Folder Tree

<div class="menu">
  <h2>Folder Tree</h2>
 <ul class="tree">
  <li><span class="branch"><i class="fa fa-folder-o"></i> Project-1</span>
   <ul class="tree">
    <li>
     <span class="branch"><i class="fa fa-folder-o"></i> Sub-Project</span>
     <ul class="tree">
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-3</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-4</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-5</span></li>
     </ul>
    </li>
    <li>
     <span class="branch"><i class="fa fa-folder-o"></i> Sub-Project2</span>
     <ul class="tree">
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-3</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-4</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-5</span></li>
     </ul>
    </li>
    <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
    <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
    <li><span class="Leaf"><i class="fa fa-file-o "></i> File-3</span></li>
    <li><span class="Leaf"><i class="fa fa-file-o "></i> File-4</span></li>
    <li><span class="Leaf"><i class="fa fa-file-o "></i> File-5</span></li>
   </ul>
  </li>
  <li>
   <span class="branch"><i class="fa fa-folder-o"></i> Project-2</span>
   <ul class="tree">
    <li><span class="branch"><i class="fa fa-folder-o"></i> Project</span>
     <ul class="tree">
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-3</span></li>
     </ul>
    </li>
    <li>
     <span class="branch"><i class="fa fa-folder-o"></i> Project</span>
     <ul class="tree">
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
     </ul>
    </li>
    <li><span class="branch"><i class="fa fa-folder-o"></i> Project</span>
     <ul class="tree">
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
     </ul>
    </li>
   </ul>
  </li>
  <li>
   <span class="branch"><i class="fa fa-folder-o"></i> Project-3</span>
     <ul class="tree">
      <li><span class="Leaf"><i class="fa fa-file-o"></i> File-1</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-3</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-4</span></li>
      <li><span class="Leaf"><i class="fa fa-file-o "></i> File-5</span></li>
     </ul>
  </li>
  <li>
   <span class="branch"><i class="fa fa-folder-o"></i> Project-4</span>
   <ul class="tree">
    <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
    <li><span class="Leaf"><i class="fa fa-file-o "></i> File-2</span></li>
   </ul>
  </li>
  <li>
   <span class="branch"><i class="fa fa-folder-o"></i> Project-5</span>
   <ul class="tree">
    <li><span class="Leaf"><i class="fa fa-file-o "></i> File-1</span></li>
   </ul>
  </li>
 </ul>

body {
    background: #79a0cb;
    font-family: arial;
    color: #fff;
}

.menu {
    width: 300px;
    margin: auto;
}

.tree {
    list-style: none;
    padding-left: 20px;
    position: relative;
    color: #fff;
}

.tree:before {
    content: '';
    width: 1px;
    background: #fff;
    top: 0;
    bottom: 7px;
    left: 0;
    position: absolute;
}

.tree li {
    position: relative;
    margin-top: 10px;
}

.tree li:hover, .tree li:focus {
    color: #edebb6;
    cursor: pointer;
}

.tree li:before {
    content: '';
    width: 20px;
    height: 1px;
    background: #fff;
    top: 12px;
    left: -20px;
    position: absolute;
}

.tree .tree {
    display: none;
}

 $('.branch').click(function(){
     $(this).children().toggleClass('fa-folder-open-o');
  $(this).next().slideToggle();
    
 });