In this article I will demonstrate how to create treeview in visualforce page.
Here in Visualforce Page displays a collapsible treeview, with Accounts and Contacts related to the account.
For this development we need JQuery plugins. Download the Jquery Plugin from here and Upload this Zip file into Static Resources with the name “JqueryTreeView”.

Create Apex class with following code:

public with sharing class TestTreeView
{
    //Wrapper class to contain the parent nodes and their child nodes
    public class WCTreeView
    {    
        public List<contact> Child {get; set;}
        Public Account Parent {get;set;}
         
        public WCTreeView(Account objAC, List<contact> objCList)
        {
            Child = objCList;
            Parent = objAC;
        }
    }
 
    Public List<wctreeview> TreeView;
     
    Public List<wctreeview> GetNodes()
    {
        TreeView = new List<wctreeview>();
        List<account> objACList = [Select Id, Name from Account];
        for (Integer i = 0; i < objACList.size(); i++)
        {
            List<contact> objCList = [Select Id, FirstName, LastName from Contact where AccountId = :objACList[i].Id];
            TreeView.add(new WCTreeView(objACList[i], objCList));
        }   
        return TreeView;
    }   
}

Now create the Visualforce page:

<apex:page controller="TestTreeView">
<!-- Include the Jquery Script files -->
<link href="{!URLFOR($Resource.JqueryTreeView,'Jquerytreeview/jquery.treeview.css')}" rel="stylesheet">
<script src="{!URLFOR($Resource.JqueryTreeView,'Jquerytreeview/jquery.js')}" type="text/javascript"></script>
<script src="{!URLFOR($Resource.JqueryTreeView,'Jquerytreeview/jquery.cookie.js')}" type="text/javascript"></script>
<script src="{!URLFOR($Resource.JqueryTreeView,'Jquerytreeview/jquery.treeview.js')}" type="text/javascript"></script>
<!-- End of Javascript files -->
<script type="text/javascript">
$(function() {
 $("#idTreeView").treeview({
 collapsed: true,
 animated: "medium",
 control:"#IdTreeControl",
 persist: "location"
 });
})
</script>
<!-- Start TreeView -->


<div id="IdTreeControl">
<a href="https://www.blogger.com/blogger.g?#"><span style="color: black;">Collapse All</span></a> | 
<a href="https://www.blogger.com/blogger.g?#"><span style="color: black;">Expand All</span></a>
</div>




<ul id="idTreeView">
<apex:repeat value="{!Nodes}" var="Pitem">


<li>
<b><apex:outputtext escape="false" style="color: black;" value="{!Pitem.Parent.Name}"></apex:outputtext></b>


<ul>
<apex:repeat value="{!Pitem.Child}" var="Citem">


<li>
<span class="formattextcon"><apex:outputtext escape="false" style="color: red;" value="{!Citem.LastName}"></apex:outputtext></span>
</li>


</apex:repeat>  
</ul>


</li>


</apex:repeat>
</ul>


<!-- End of TreeView -->      
</apex:page>

And here is the output: