Tree (Folder) structure

index.html

<h3>Tree Structure using ul li</h3> 
<ul class="treeRoot">
  <li class="hasSubMenu"><span>Root</span>
      <ul class="activeSubMenu">
        <li class="hasSubMenu"><span>Branch1</span>
           <ul>
              <li><span>Branch1-sub2</span></li>
              <li><span>Branch1-sub3</span></li>
              <li><span>Branch1-sub4</span></li>
              <li><span>Branch1-sub5</span></li>
              <li><span>Branch1-sub6</span></li>
          </ul>        
        </li>
        <li><span>Branch2</span></li>
        <li class="hasSubMenu"><span>Branch3</span>
          <ul>
              <li><span>Branch3-sub1</span></li>
              <li class="hasSubMenu"><span>Branch3-sub2</span>
                  <ul>
                    <li><span>Branch3-sub1</span></li>
                    <li><span>Branch3-sub2</span></li>
                    <li><span>Branch3-sub3</span></li>
                    <li><span>Branch3-sub4</span></li>
                    <li><span>Branch3-sub5</span></li>
                    <li><span>Branch3-sub6</span></li>
                  </ul>
              </li>
              <li><span>Branch3-sub3</span></li>
              <li><span>Branch3-sub4</span></li>
              <li><span>Branch3-sub5</span></li>
              <li><span>Branch3-sub6</span></li>
          </ul>
        </li>
    </ul>

  </li>
</ul>  

script.js

$("ul.treeRoot li span").on("click",function(){
if($(this).parent().hasClass("hasSubMenu")){
   if($(this).parent().find("ul").hasClass("activeSubMenu")){
  		$(this).parent().find("ul").removeClass("activeSubMenu");
   }else{    	 $(this).parent().find("ul").addClass("activeSubMenu");	
  }
}	
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

ul , li {
  list-style: none;
  margin: 0;
  padding:0;
}
ul.treeRoot > li ul,
ul.treeRoot > li ul {
  padding-left:20px;
}
ul.treeRoot li{
  border-left: 1px solid #000;
}
ul.treeRoot ul li,
ul.treeRoot li{
  border-left:1px solid #000;
  padding-left: 20px;
  position: relative;
  font-size: 16px;
  line-height: 24px; 
}
ul.treeRoot ul li:last-child:after,
ul.treeRoot li:last-child:after{
  position:absolute;
  content: "";
  display:inline-block;
 top: 12px;
  width:1px;
  left: -1px;
  bottom: 0;
  background: #fff
}
ul.treeRoot ul li:before,
ul.treeRoot li:before{
  height: 1px;
  background: #000;
  width: 15px; 
  left:0;
  top: 11px;
  display: inline-block;
  content: "";
  position: absolute;
}
.treeRoot li ul {
  display: none;
}
.treeRoot li ul.activeSubMenu{
  display: block;
}

tree-folder-structure.markdown

Tree (Folder) structure

In this pen , I have created tree structure using some ul li tag

A Pen by Unmesh on CodePen.

License.