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
Akshay ShrivastavaAkshay Shrivastava 

how do I create Tab in accordian

I want to create Tab between accordian.
i want to do... when i click on that tab it shows contacts details

basically i am fatching account name and contacts and oppoertunity associted with the account.
>Account name
   Tab1   Tab2
  > contacts details if Tab1 selected
  > oppoertunity deatils if Tab2 selected


 <lightning:accordion>
        <aura:iteration items="{!v.accList}" 
                        var="acc">
            
            <lightning:accordionSection name="{!acc.Name}" 
                                        label="{!acc.Name}">    
                <lightning:accordion>
                    <aura:iteration items="{!acc.Contacts}" 
                                    var="con">
                        <lightning:accordionSection name="{!con.Name}" 
                                                    label="{!con.Name}">
                            
                            <aura:set attribute="body">
                                
                                <p>FirstName : {!con.FirstName}</p>
                                <p>LastName : {!con.LastName}</p>
                                <p>Phone: {!con.Phone}</p>
                            </aura:set>
                        </lightning:accordionSection>
                    </aura:iteration>
                </lightning:accordion> 
                
                <lightning:accordion>
                    <aura:iteration items="{!acc.Opportunities}" 
                                    var="opp">
                        <lightning:accordionSection name="{!opp.Name}" 
                                                    label="{!opp.Name}">
                            
                            <aura:set attribute="body">
                                
                                <p>Id : {!opp.Id}</p>
                                
                            </aura:set>
                        </lightning:accordionSection>
                    </aura:iteration>
                </lightning:accordion>
                
            </lightning:accordionSection>
        </aura:iteration>
    </lightning:accordion>
    

this is working but only need to show details when tab selected
 
Best Answer chosen by Akshay Shrivastava
CharuDuttCharuDutt
Hii Akshay Shrivastava
Try The Below Code
CMP

<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="accList" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
    
    <!--Component Start-->
    <lightning:accordion>
        <aura:iteration items="{!v.accList}" 
                        var="acc">
            
            <lightning:accordionSection name="{!acc.Name}" 
                                        label="{!acc.Name}">  
     <lightning:tabset selectedTabId="two">
        <lightning:tab label="Contacts" id="one">
            <aura:iteration items="{!acc.Contacts}" var="con" indexVar="index">
               <li>contact {!index + 1} Name : {!con.Name}</li>
            </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>
            </aura:iteration>
        </lightning:tab>
    </lightning:tabset>
               
                
            </lightning:accordionSection>
        </aura:iteration>
    </lightning:accordion>
</aura:component>



JS


({
    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--->>> " + JSON.stringify(allValues));
                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
    public static List<Account> fetchAcc (){
        return [SELECT Id, Name,(select id,name from contacts),(select id,name from opportunities) FROM Account];
    }    
}
Please Mark It As Best Answer If it Helps So It Can Help Others In Future.And It Motivates us To Give More In Community
Thank You!

All Answers

CharuDuttCharuDutt
Hii Akshay Shrivastava
Try The Below Code
CMP

<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="accList" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
    
    <!--Component Start-->
    <lightning:accordion>
        <aura:iteration items="{!v.accList}" 
                        var="acc">
            
            <lightning:accordionSection name="{!acc.Name}" 
                                        label="{!acc.Name}">  
     <lightning:tabset selectedTabId="two">
        <lightning:tab label="Contacts" id="one">
            <aura:iteration items="{!acc.Contacts}" var="con" indexVar="index">
               <li>contact {!index + 1} Name : {!con.Name}</li>
            </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>
            </aura:iteration>
        </lightning:tab>
    </lightning:tabset>
               
                
            </lightning:accordionSection>
        </aura:iteration>
    </lightning:accordion>
</aura:component>



JS


({
    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--->>> " + JSON.stringify(allValues));
                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
    public static List<Account> fetchAcc (){
        return [SELECT Id, Name,(select id,name from contacts),(select id,name from opportunities) FROM Account];
    }    
}
Please Mark It As Best Answer If it Helps So It Can Help Others In Future.And It Motivates us To Give More In Community
Thank You!
This was selected as the best answer
Akshay ShrivastavaAkshay Shrivastava
Thanks Charu dutt 
this work perfectly.