<apex:page standardStylesheets="false" controller="treenodes"> 
  <!-- Include the Jquery Script files -->     
  <link rel="stylesheet" href="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.css')}"/> 
  <apex:outputLink value="https://bd2--cgkt.cs87.my.salesforce.com/001/o"><h1><b>Back to Account List</b></h1>!</apex:outputLink>   
  <script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.js')}" type="text/javascript"></script>     
  <script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.cookie.js')}" type="text/javascript"></script>     
  <script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.js')}" type="text/javascript"></script>
  <!-- End of Javascript files --> 
  <script type="text/javascript">         
  $(function() 
  {             
  $("#tree").treeview({                 
  collapsed: false,                 
  animated: "medium",                 
  control:"#sidetreecontrol",                 
  persist: "location"            
  });          }) 
  </script>  <br/> <br/> <br/> 
  <!-- Tree --> 
  <div class="treeheader" style="height:0px;">&nbsp;</div> 
  <div id="sidetreecontrol">
  <a href="?#"><font style="color:blue;">Exclude Contact</font></a> | <a href="?#"><font style="color:blue;">Include Contact</font></a>
  </div>  <ul id="tree">     
  <apex:repeat value="{!mainnodes}" var="parent">         
  <li><strong><apex:outputtext style="color:blue;" escape="false" value="{!parent.gparent.Name}"/></strong>              
  <ul>                  
  <apex:repeat value="{!parent.parent}" var="child">                     
  <li><span class="formattextcon"><apex:outputtext style="color:green;" escape="false" value="{!child.LastName}"/></span>                         
  <ul>                             
  <apex:repeat value="{!child.Cases}" var="gchildren">                                
  <li> <span class="formattextcon"> 
  <apex:outputtext escape="false" style="color:red;" value="{!gchildren.CaseNumber}"/> <b>||</b> &nbsp;
  <apex:outputtext escape="false" value="{!gchildren.Subject}"/> </span> </li>                             
  </apex:repeat>                        
  </ul>                            
  </li>                  
  </apex:repeat>                
  </ul>           
  </li>     
  </apex:repeat> 
  </ul> 
  <!-- End of Tree -->        
  </apex:page>

public class treenodes
{
    /* Wrapper class to contain the nodes and their children */
    public class cNodes
    {
        public List<Contact> parent {get; set;}
        Public Account gparent {get;set;}
        public cNodes(Account  gp, List<Contact> p)
        {       
            parent = p;       
            gparent = gp;   
        }  
    }
    /* end of Wrapper class */
    Public List<cNodes> hierarchy;
    Public List<cNodes> getmainnodes()
    {
        hierarchy = new List<cNodes>();
        List<Account> tempparent = [Select Id,Name from Account];
        for (Integer i =0; i< tempparent.size() ; i++)
        {
            List<Contact> tempchildren = [Select Id,FirstName,LastName from Contact where AccountId = :tempparent[i].Id];
            hierarchy.add(new cNodes(tempparent[i],tempchildren));
        }
        return hierarchy;
    }
}