How to Use Salesforce Lightning Accordion With Aura Iteration In Lightning Component

Salesforce Lightning Accordion:

lightning accordion component groups related content in a single container. Only one accordion section is expanded at a time. When you select a section, it’s expanded or collapsed. Each section can hold one or more Lightning components.

Here is an example of Lightning Accordion. I’m retrieving a list of contacts from Salesforce and populating into the Lightning Accordion.

Apex Class : AccordionAuraController.apxc

public class AccordionAuraController {
    @AuraEnabled
    public static List<Contact> getContacts(){
        List<Contact> contactList = new List<Contact>();
        for(Contact oCon : [SELECT Id, Name, Email, Phone, MailingStreet, MailingCity, MailingState, MailingPostalCode, MailingCountry From Contact LIMIT 10]){
           contactList.add(oCon); 
        }
        return contactList;
    }
}

Lightning Component : AccordionDemo.cmp

<aura:component controller="AccordionAuraController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
  <!--on component load call doInit javaScript function and fetch records from server-->  
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <aura:attribute name="conList" type="List"/>
    
    <div class="slds-m-around_x-large">
        
        <lightning:accordion >
            <aura:iteration items="{!v.conList}" var="con">
                <lightning:accordionSection name="{!con.name}" label="{!con.Name}">
                    <aura:set attribute="body">
                        <p><b>Street</b> : {!con.MailingStreet}</p>
                        <p><b>City</b> : {!con.MailingCity}</p>
                        <p><b>State</b> : {!con.MailingState}</p>
                        <p><b>Postcode</b> : {!con.MailingPostalcode}</p>
                        <p><b>Country</b> : {!con.MailingCountry}</p>
                        <p><b>Email</b> : {!con.Email}</p>
                        <p><b>Phone</b> : {!con.Phone}</p>
                    </aura:set>
                </lightning:accordionSection>
            </aura:iteration>
        </lightning:accordion>
        
    </div>
    
</aura:component>

JavaScript Controller : AccordionDemoController.js

({    
    doInit: function(component,event,helper){
        var action = component.get('c.getContacts');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS' && component.isValid()){
                //get contact list
                component.set('v.conList', response.getReturnValue());
            }else{
                alert('ERROR...');
            }
        });
        $A.enqueueAction(action);
    }
})

Check Also : How To Create Collapsible Section And Accordion (Pure CSS) In Lightning Component

demo.app [Lightning Application]

<aura:application extends="force:slds">
    <c:AccordionDemo/>
<!-- here c: is org. default namespace prefix-->
</aura:application>

Output :

Resources : 

• lightning:accordion Documentation

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box  or Developer Forums 🙂

About The contributor: 

• Hareesh goud

  1 Post Contribute

  

Hareesh goud

1 Post Contribute

My name  Hareesh goud I have 5 Years of salesforce experience , Certified App builder and Platform Developer1

Email Addess: [email protected]

 

 

 

Post By Hareesh :

1. How to Use Salesforce Lightning Accordion With Aura Iteration In Lightning Component