<aura:component controller="AccRelatedConC"
   implements="flexipage:availableForRecordHome,force:hasRecordId" access="global"  >
   <aura:attribute name="accList" type="List"/>
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
   <aura:attribute name="activeSections" type="List" />

   <aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
   <aura:attribute name="searchKeyword" type="String" description="use for store user search input"/>

   <div class="slds-border_bottom">
      <h1>Accounts</h1>
   </div>
   <div class="slds-scrollable_y">
      <div class="slds-text-longform">

         <lightning:input value="{!v.searchKeyword}"
            placeholder="search Accounts.."
            aura:id="searchField"
            label="Account Name"/>

         <lightning:button onclick="{!c.Search}"
            variant="brand"
            label="Search"
            iconName="utility:search"/>

         <lightning:accordion activeSectionName="{! v.activeSections }" onsectiontoggle="{! c.handleSectionToggle }">
            <div class="demo-only demo-only--sizing slds-grid slds-wrap">
               <div class="slds-size_1-of-2">
                  <div class="slds-box slds-box_x-small slds-text-align_left slds-m-around_x-small">
                     <aura:iteration items="{!v.accList}" 
                        var="acc">
                        <lightning:accordionSection name="{!acc.Name}" 
                           label="{!acc.Name}">
                           <div class="slds-scrollable" style="height:10rem;width:24rem">
                              <div class="slds-text-longform" style="width:150%">
                                 <lightning:tabset selectedTabId="one">
                                    <lightning:tab label="Contacts" id="one">
                                       <aura:iteration items="{!acc.Contacts}" var="con" indexVar="index">
                                          <li>Contact {!index + 1} Name : {!con.Name}</li>
                                          <li>Contact Phone :</li>
                                          <p>
                                             <lightning:formattedPhone value="{!con.Phone}"></lightning:formattedPhone>
                                          </p>
                                          <br></br>
                                       </aura:iteration>
                                    </lightning:tab>
                                    <lightning:tab label="Opportunities" id="two">
                                       <aura:iteration items="{!acc.Opportunities}" var="opp" indexVar="index">
                                          <li>Opportunities {!index + 1} Name : {!opp.Name}</li>
                                          <li>ID : {!opp.Id}</li>
                                          <br></br>
                                       </aura:iteration>
                                    </lightning:tab>
                                 </lightning:tabset>
                              </div>
                           </div>
                        </lightning:accordionSection>
                     </aura:iteration>
                  </div>
               </div>
            </div>
         </lightning:accordion>
      </div>
   </div>
</aura:component>



CONTROLLER
({
    doInit : function(component, event, helper) {
        helper.SearchHelper( component)
    },
        handleSectionToggle: function (component, event, helper) {
                var openSections = event.getParam('openSections');

        if (openSections.length === 0) {
            alert("All sections are closed");
        } else {
            alert(openSections);
        }

    },
    Search: function(component, event, helper) {
            helper.SearchHelper(component, event);
        
    },
})

HELPER
({

    SearchHelper : function(component, event, helper) {
        var action = component.get('c.fetchAcc');
         action.setParams({ searchKey : component.get("v.searchKeyword") });
        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.activeSections', allValues.Name);
                component.set('v.accList', 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);
    }
});


APEX
public class AccRelatedConC {
  @AuraEnabled(cacheable=true)
    public static List<Account> fetchAcc (String searchKey){
        String query= 'SELECT Id, Name,(select id,Name,AccountId from contacts Where AccountId != Null),'+
                '(select id,Name,AccountId from opportunities Where AccountId != Null) FROM Account';
         if ( searchKey != Null) {
            String key = '%' + searchKey + '%';
            query += ' WHERE Name LIKE :key';
        }system.debug(Database.query( query ));
         return Database.query( query );
        
    }  
}