Collapsible section Accordion Sample lightning component

How To Create Collapsible Section And Accordion In Lightning Component

Lightning Component

Hi guys,

Collapsible sections OR Accordion are useful when you want to show and hide large amount of content in your salesforce lightning component.

Today in this post we are going to create a sample collapsible section And a sample Accordion in salesforce lightning.

Part 1 : Collapsible Section Sample [Multiple selection]

Collapsible section Accordion Sample lightning component
Collapsible Sections Output:

From developer console >> file >> new >> Lightning Component

Lightning Component [collapseSec.cmp]

JavaScript Controller [collapseSecController.js]

JavaScript Helper [collapseSecHelper.js]

From developer console >> file >> new >> Lightning Application

demo.app [Lightning Application]

Part 2 : Accordion Sample [single selection] Using CSS

Collapsible section Accordion Sample lightning component
Accordion Sample Output:

 

From developer console >> file >> new >> Lightning Component

Lightning Component [AccordionSec.cmp]

Style [AccordionSec.css]

From developer console >> file >> new >> Lightning Application

demo.app [Lightning Application]

Some Useful 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 🙂

(Visited 14,690 times, 7 visits today)

12 comments

    • How to use “Part 1 : Collapsible Section Sample [Multiple selection]” to toggle dynamic components? My implementation toggles all the divs generated dynamically.

    • How to use “Part 1 : Collapsible Section Sample [Multiple selection]” to toggle dynamic components? My implementation toggles all the divs generated dynamically.

  • Hi, I am using  “Part 1 : Collapsible Section Sample [Multiple selection]” for showing and hiding Dynamic component created at runtime. However, I am not able to toggle the class “independently” because of static “aura:id=articleOne”. The current code expands or collapses All divs.

    How can I toggle class for dynamic components?

  • Please do this dynamically, on click + it should display contacts related to account, on click – it should collapse

  • Please do this dynamically, on click + it should display contacts related to account, on click – it should collapse

  • Thank you for the wonderful post. Though I did manage to figure it out but It would have been great if this post(or maybe a separate post) could cover handling content within div that might be dynamically generated using an iterator.

    The Accordian post works for the most part except that it won’t let us do multiple selection (afaik).

     

    Thanks again!

Leave a Reply