+ Start a Discussion
Shweta Choudhary 17Shweta Choudhary 17 

How to display list of contacts, when I select one contact, it shoud display related opportunities with lightning component?

Hii Shweta
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" />
   <aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
   <div class="slds-border_bottom">
   <div class="slds-scrollable_y">
      <div class="slds-text-longform">
         <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}" 
                        <lightning:accordionSection name="{!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>
                                             <lightning:formattedPhone value="{!con.Phone}"></lightning:formattedPhone>
                                    <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>

    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 {



    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();
                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[0] && errors[0].message){
                        console.log("Error Message: " + errors[0].message);
                    console.log("Unknown Error");

public class AccRelatedConC {
    public static List<Account> fetchAcc (){
        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';
         system.debug(Database.query( query ));
         return Database.query( query );
Please Mark It as Best Answer If It Helps
Thank You!
Movies BuddyMovies Buddy
Movies Buddy (https://www.moviesbuddy.live/) - Best website for 720p and 480p movie download