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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
({ 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]
|
1 2 3 4 5 6 7 8 |
<aura:application extends="force:slds"> <c:AccordionDemo/> <!-- here c: is org. default namespace prefix--> </aura:application> |
Output :
Resources :
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:
My name Hareesh goud I have 5 Years of salesforce experience , Certified App builder and Platform Developer1
Email Addess: [email protected]
5 comments
hi, In the Above post the fields are getting displayed what i want that in editable mode.
Hi Hareesh ,
its an amazing post about the use of Salesforce lightning with Aura iteration
Thank You.
Hi,
It is only expandable NOT collapsible. Can you please provide a way how can we collapse the expanded section on clicking the same accordin?
neha do u got any solution for this,it is Expandible by default i think css needs to be added
Can you make default one Accordian section Open? Lets suppose first contact detail should be always open.