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

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.

lightning accordion demo
Accordion Demo
Apex Class : AccordionAuraController.apxc

Lightning Component : AccordionDemo.cmp

JavaScript Controller : AccordionDemoController.js

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

demo.app [Lightning Application]

Output :

lightning accordion demo

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: 

Hareesh goud

1 Post Contribute
sfdcHareesh sfdcmonkey
My name  Hareesh goud I have 5 Years of salesforce experience , Certified App builder and Platform Developer1
(Visited 14 times, 1 visits today)
(Visited 3,284 times, 32 visits today)

3 comments

  • 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?

     

Leave a Reply