How To Create Expand/Collapse Sections In Salesforce Lightning Component

Hi guys, today in this post we will learn that how we can create dynamic reusable custom expandable / collapsible sections in salesforce lightning component.

collapse-expend section sfdc

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

Lightning Component : collapseSections.cmp

  • Important : section aura:id and data-auraId attributes must be same. (check highlighted code )
JavaScript Controller : collapseSectionsController.js

  • check code comments.
TestApp :

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

Output :

collapse-expend section sfdc

Other popular Post :

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.

Happy Learning ?

(Visited 14,058 times, 1 visits today)

7 thoughts on “How To Create Expand/Collapse Sections In Salesforce Lightning Component”

  1. Hi!
    What about the case when you use an aura:iteration to create collapsible sections? I tried and this does not seem to work since having more aura:id attributes with the same value is confusing for the component. Can you please help?

    Reply

Leave a Comment