<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container" style="margin-top:30px;"> <div class="row"> <div class="col-md-4"> <ul id="tree1"> <p class="well" style="height:135px;"><strong>Initialization no parameters</strong> <br /> <code>$('#tree1').treed();</code> </p> <li><a href="#">Industry</a> <ul> <li>Aerospace</li> <li>Telecommunication</li> <li>Transport</li> <li>Computer</li> <li>Agriculture</li> <li>Pharmaceutical</li> <li>Food</li> <li>Healthcare</li> <li>Entertainment</li> <li>News Media</li> <li>Manufacturing</li> <li>Music</li> <li>Mining</li> <li>Electronics</li> </ul> </li> <li><a href="#">Source</a> <ul> <li>Employee Referral <li>External Referral</li> <li>Twitter</li> <li>Facebook</li> <li>Seminar</li> <li>Chat</li> <li>Advertisement</li> <li>Partner</li> <li>Trade Show</li> </ul> <li><a href="#">Lead Classification</a> <li><a href="#">Lead Status</a> <ul> <li>Company Maintenance</li> <li>Employees <ul> <li>Reports <ul> <li>Report1</li> <li>Report2</li> <li>Report3</li> </ul> </li> <li>Employee Maint.</li> </ul> </li> <li>Human Resources</li> </ul> </li> </ul> </div> <div class="col-md-4"> <p class="well" style="height:135px;"><strong>Initialization optional parameters</strong> <br /> <code>$('#tree2').treed({openedClass : 'glyphicon-folder-open', closedClass : 'glyphicon-folder-close'});</code> </p> <ul id="tree2"> <li><a href="#">TECH</a> <ul> <li>Company Maintenance</li> <li>Employees <ul> <li>Reports <ul> <li>Report1</li> <li>Report2</li> <li>Report3</li> </ul> </li> <li>Employee Maint.</li> </ul> </li> <li>Human Resources</li> </ul> </li> <li>XRP <ul> <li>Company Maintenance</li> <li>Employees <ul> <li>Reports <ul> <li>Report1</li> <li>Report2</li> <li>Report3</li> </ul> </li> <li>Employee Maint.</li> </ul> </li> <li>Human Resources</li> </ul> </li> </ul> </div> <div class="col-md-4"> <p class="well" style="height:135px;"><strong>Initialization optional parameters</strong> <br /> <code>$('#tree3').treed({openedClass:'glyphicon-chevron-right', closedClass:'glyphicon-chevron-down'});</code> </p> <ul id="tree3"> <li><a href="#">TECH</a> <ul> <li>Company Maintenance</li> <li>Employees <ul> <li>Reports <ul> <li>Report1</li> <li>Report2</li> <li>Report3</li> </ul> </li> <li>Employee Maint.</li> </ul> </li> <li>Human Resources</li> </ul> </li> <li>XRP <ul> <li>Company Maintenance</li> <li>Employees <ul> <li>Reports <ul> <li>Report1</li> <li>Report2</li> <li>Report3</li> </ul> </li> <li>Employee Maint.</li> </ul> </li> <li>Human Resources</li> </ul> </li> </ul> </div> </div> </div>