function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Jyoti BhosaleJyoti Bhosale 

how can we display contact with account using lightning:accordion component

User-added imageUser-added image
CharuDuttCharuDutt
Hii Jyoti
Try Below Code
<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" />
    
    <lightning:accordion activeSectionName="{! v.activeSections }" onsectiontoggle="{! c.handleSectionToggle }">
        <aura:iteration items="{!v.accList}" var="acc">
            <lightning:accordionSection name="{!acc.Name}" label="{!acc.Name}">
                <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:accordionSection>
        </aura:iteration> 
    </lightning:accordion>
</aura:component>


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

Helper

({

    SearchHelper : 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();
                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 (){
        List<Account> query= [SELECT Id, Name,Rating,(select id,Name,AccountId,Account.name from contacts Where AccountId != Null) FROM Account limit 5];
         return query;
        
    }  
}
Please Mark It As Best Answer If It Helps
Thank You!