How to display account and its related contacts on selection in visualforce page

How to display account and its related contacts on selection in visualforce page
Apex Class:
public class DisplayContactOnAccountSelController {

    public list<AccountContactWrapper> lstAccountContactWrapper { get; set; }
    public list<AccountContactWrapper> lstSelectedAccountContactWrapper { get; set; }
    public list<account> selectedAccounts{get;set;}   

    public DisplayContactOnAccountSelController () {
        lstSelectedAccountContactWrapper = new list<AccountContactWrapper>();
        if(lstAccountContactWrapper == null) {
            lstAccountContactWrapper = new list<AccountContactWrapper>();
            for(account a:[select id,name,(select id,name from contacts) from account limit 10]) {
                lstAccountContactWrapper.add(new AccountContactWrapper(a));
            }
        }
    }
 
    public void ProcessSelected() {
        lstSelectedAccountContactWrapper =new list<AccountContactWrapper>();
        selectedAccounts =new list<Account>();
        for(AccountContactWrapper wrapobj:lstAccountContactWrapper){
            if(wrapobj.isSelected==true) {
                selectedAccounts.add(wrapobj.acc);
            } 
        }
       
        for(Account acc:[select id,name,(select id,name from contacts) from account where id in:selectedAccounts]) {
            lstSelectedAccountContactWrapper.add(new AccountContactWrapper(acc)); 
        }
             
    }
    public class AccountContactWrapper {
 
        public Account acc {get;set;}
        public boolean isSelected {get;set;}
   
        public AccountContactWrapper(account a) {
            acc = a;
            isselected=false;
        }
    }

}
Visualforce Page
<apex:page sidebar="false" controller="DisplayContactOnAccountSelController">
<apex:form >
    <apex:pageBlock id="AccountContactBlock">
        <apex:pageBlockSection columns="2">
        <apex:pageBlockTable value="{!lstAccountContactWrapper}" var="acc" id="AccountSection">
            <apex:column >
                <apex:inputCheckbox value="{!acc.isSelected}" id="InputId"/>
            </apex:column>
            <apex:column value="{!acc.acc.name}"/>
        </apex:pageBlockTable>
        <apex:pageBlockTable value="{!lstSelectedAccountContactWrapper}" var="acc" id="contactsSection" rendered="{!IF(lstSelectedAccountContactWrapper.size > 0,true,false)}">>
            <apex:column headerValue="Account and Its Related Contacts">
                <apex:pageBlockTable value="{!acc.acc.contacts}" var="con">
                    <apex:facet name="header">{!acc.acc.Name}</apex:facet>
                    <apex:column value="{!con.name}" headerValue="Contact Name"/>
                </apex:pageBlockTable>
            </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlockSection>
        <apex:pageBlockButtons location="bottom">
          <apex:commandButton action="{!ProcessSelected}" value="Show Account and its Contacts" reRender="AccountContactBlock,contactsSection"/>
        </apex:pageBlockButtons>
    </apex:pageBlock>
</apex:form>

</apex:page>
Output: