Collapsible section Accordion Sample lightning component

How To Create Collapsible Section And Accordion In Lightning Component

Lightning Component

Sharing is caring!

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 🙂

Sharing is caring!

(Visited 7,127 times, 32 visits today)

7 comments

Leave a Reply