But this shwows the accounts and their contacts.

I need it to show the account Hierarchy on the page layout.
Class

public class accconhierarchy {
    Private list<account> acc;
    
    public List<accountWrap> accountList { get; set; }
    public accconhierarchy (){
        List<contactWrap> cw;
        accountList = new List<accountWrap>();
        acc = [select id,name,industry,billingcountry,createdbyid,(select id,name,email,phone from contacts) from account limit 20];
        for(account a:acc){
            cw = new list<contactWrap>();
            For(contact co : a.contacts){
               cw.add(new contactWrap(co));
            }
            accountList.add(new accountWrap(a,false,cw));
        }
    }
    
    public class accountWrap{
        public account oAccount{get;set;}
        public boolean isSelected{get;set;}
        public List<contactWrap> contactset{get;set;}
        public accountWrap(account a,boolean b, List<contactWrap> c){
            oAccount=a;
            isSelected=b;
            contactset =c;            
        }
    }
    
    public class contactWrap{
        public contact oContact{get;set;}
        public boolean isSelected{get;set;}        
        public contactWrap(contact a){
            oContact=a;
            isSelected=false;                       
        }
    }
    
}

Visualforce
<apex:page controller="accconhierarchy"> <apex:form > <apex:pageBlock > <style type="text/css"> .showContacts { background: transparent url('/img/alohaSkin/twisty_sprite.png') 0 0 no-repeat; } .hideContacts { background: transparent url('/img/alohaSkin/twisty_sprite.png') 0 -11px no-repeat; } </style> <apex:outputPanel layout="none" rendered="{!accountList.size!=0}"> <table id="tableAccount" class="list" border="0" cellpadding="0" cellspacing="0"> <thead> <tr class="headerRow"> <th class="actionColumn">Action</th> <th>Account Name</th> <th>Industry</th> <th>Billing Country</th> <th>Createdby</th> </tr> </thead> <tbody> <apex:repeat id="repeatAccount" value="{!accountList}" var="item"> <apex:variable var="acc" value="{!item.oAccount}" /> <tr id="{!$Component.repeatAccount}:account" class="dataRow"> <td class="actionColumn"> <apex:inputCheckbox id="selectAccountRow" value="{!item.IsSelected}" onclick="javascript:toggleSelectAll(this, '{!$Component.repeatAccount}');"/> </td> <td class="dataCell"> <apex:outputLink id="linkShowHide" value="javascript:toggleContactRow('{!$Component.repeatAccount}')"> <img id="{!$Component.repeatAccount}:Img" src="/s.gif" class="showContacts" border="0" height="11px" width="11px" style="padding-right: 4px;"/> <apex:outputField value="{!acc.Name}" /> </apex:outputLink> </td> <td class="dataCell"><apex:outputField value="{!acc.Industry}" /></td> <td class="dataCell"><apex:outputField value="{!acc.billingcountry}" /></td> <td class="dataCell"><apex:outputField value="{!acc.CreatedById}" /></td> </tr> <tr id="{!$Component.repeatAccount}:Contact" class="dataRow" style="display:none;"> <td colspan="100" style="padding:10px; padding-left: 45px;"> <h3>Contacts</h3> <br/> <apex:outputPanel layout="none"> <table id="tableAccountContacts" class="list" border="0" cellpadding="0" cellspacing="0"> <thead> <tr class="headerRow"> <th class="actionColumn">Action</th> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody> <apex:repeat id="repeatAccountContacts" value="{!item.contactSet}" var="subitem"> <apex:variable value="{!subitem.oContact}" var="con" /> <tr class="dataRow"> <td class="actionColumn"><apex:inputCheckbox id="selectContactRow" styleclass="ContactCheckbox" value="{!subitem.IsSelected}"/></td> <td class="dataCell"><apex:outputField value="{!con.Name}" /></td> <td class="dataCell"><apex:outputField value="{!con.email}"/></td> <td class="dataCell"><apex:outputField value="{!con.phone}" /></td> </tr> </apex:repeat> </tbody> </table> </apex:outputPanel> </td> </tr> </apex:repeat> </tbody> </table> </apex:outputPanel> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script> jQuery.noConflict(); function toggleContactRow(rowId) { try { var AccountImg = jQuery(document.getElementById(rowId + ":Img")); var ContactsRow = jQuery(document.getElementById(rowId + ":Contact")); if (AccountImg.hasClass("hideContacts")) { AccountImg.attr("class", "showContacts"); ContactsRow.hide(); } else { AccountImg.attr("class", "hideContacts"); ContactsRow.show(); } } catch (e) { alert(e); } } function toggleSelectAll(elCheckbox, rowId) { try { var SelectAll = jQuery(elCheckbox); var ContactsRow = jQuery(document.getElementById(rowId + ":Contact")); ContactsRow.find(".ContactCheckbox").each(function() { jQuery(this).prop("checked", SelectAll.is(":checked")); }); } catch (e) { alert(e); } } </script> </apex:pageBlock> </apex:form> </apex:page>