public class AccRelatedConC{    
    @AuraEnabled
    public static List<Account> fetchAcc (){
        return [SELECT Id, Name, Phone FROM Account LIMIT 10];
    }    
    @AuraEnabled
    public static List<Contact> fetchCon (String recordId){
        return [SELECT Id, Name, Phone FROM Contact WHERE AccountId=:recordId];
    }
}

Lightning Component -

<aura:component controller="AccRelatedConC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="PageHeading" type="String" default="Account and Related Contacts" />
    <aura:attribute name="accData" type="List"/>
    <aura:attribute name="conData" type="List"/>
    <aura:attribute name="show" type="boolean" default="false"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doinit}" />
    
    <div class=" slds-page-header slds-text-heading--large slds-align--absolute-center">       
        {!v.PageHeading}              
    </div>
    <div class="slds-section slds-is-open">
        <h3 class="slds-section__title slds-theme_shade">
            <span class="slds-truncate slds-p-horizontal_small" title="Section Title">Accounts</span>
        </h3>
        <br/>
        <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
            <thead>
                <tr class="slds-text-heading--label">
                    <th scope="col"><div class="slds-truncate" title="Account Name">Account Name</div></th>
                    <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.accData}" var="row" indexVar="index">
                    <tr>
                        <th scope="row">
                            <div class="slds-truncate" >
                                <a onclick="{!c.showCon}" value="{!row}" data-index="{!index}">{!row.Name} </a>
                            </div>
                        </th>
                        <td><div class="slds-truncate" title="{!row.Phone}">{!row.Phone}</div></td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
    <br/>
    <aura:if isTrue="{!v.show}">
        <div class="slds-section slds-is-open">
            <h3 class="slds-section__title slds-theme_shade">
                <span class="slds-truncate slds-p-horizontal_small" title="Section Title">Related Contact Details</span>
            </h3>
            <br/>
            <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
                <thead>
                    <tr class="slds-text-heading--label">
                        <th scope="col"><div class="slds-truncate" title="Contact Name">Contact Name</div></th>
                        <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
                    </tr>
                </thead>
                <tbody>
                    <aura:iteration items="{!v.conData}" var="row2">
                        <tr>
                            <th scope="row"><div class="slds-truncate" title="{!row2.Name}">{!row2.Name}</div></th>
                            <td><div class="slds-truncate" title="{!row2.Phone}">{!row2.Phone}</div></td>
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </div>
    </aura:if>
</aura:component>

js Controller -


({
    doinit : function(component, event, helper) {
        var action = component.get('c.fetchAcc');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var allValues = response.getReturnValue();
                console.log("allValues--->>> " + allValues);
                component.set('v.accData', allValues);
            }
            else if(state === "ERROR") {
                var errors = response.getError();
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log("Error Message: " + errors[0].message);
                    }
                }
                else{
                    console.log("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    showCon : function(component, event, helper){
        component.set("v.show",true);
        var idx = event.target.getAttribute('data-index');
        console.log('idx---->>> ' + idx);
        var rowRecord = component.get("v.accData")[idx];
        console.log('rowRecord---->>> ' + JSON.stringify(rowRecord));
        var action = component.get('c.fetchCon');
        action.setParams({recordId : rowRecord.Id});
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var allValues = response.getReturnValue();
                console.log("allValues--->>> " + JSON.stringify(allValues));
                component.set('v.conData', allValues);
            }
            else if(state === "ERROR") {
                var errors = response.getError();
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log("Error Message: " + errors[0].message);
                    }
                }
                else{
                    console.log("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
    }
})


Application -

<aura:application extends="force:slds">
    <c:accountContactDisplay />
</aura:application>