Create custom expand all/ collapse all for accordion section rows table based in lightning component

Vijay Kumar
2 min readAug 16, 2020
Create custom expand all/ collapse all for accordion section rows table based in lightning component

Hey guys, today in this post we are going to learn about how to create a custom expandable all/collapsible all (Accordion) rows table based in lightning component.

Files we used in this post example:-

expandAndCollapseAllapp.app

Lightning Application

It is used for call the component to preview on browser.

expandAndCollapseAllCmp.cmp

Lightning Component

It is used for create a table of student Information.

expandAndCollapseAllCmpController.js

Lightning Component Controller

expandAndCollapseAllCmp.css

Component Style CSS

It is used for creat a custom style CSS for alignmnet expandable/Collapsible section table

expandAndCollapseDetailscmp.cmp

Lightning Component

It is a child component of ‘expandAndCollapseAllCmp.cmp’

expandAndCollapseDetailscmpController.js

Lightning Component Controller

It is used for expand and collapse functionality in row section detail view.

Final Output

Other post that would you like to learn

Step 1:- Create Lightning Application : expandAndCollapseAllapp.app

From Developer Console >> File >> New >> Lightning Application

expandAndCollapseAllapp.app [Component Application File]

Step 2:- Create Lightning Component : expandAndCollapseAllCmp.cmp

From Developer Console >> File >> New >> Lightning Component

expandAndCollapseAllCmp.cmp [Lightning Component File]

Step 3:- Create Lightning Component : expandAndCollapseAllCmpController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

expandAndCollapseAllCmpController.js [JavaScript Controller]

Step 4:- Create Lightning Component : expandAndCollapseAllCmp.css

From Developer Console >> File >> New >> Lightning Component >> Component Style CSs

expandAndCollapseAllCmp.css [Style CSS]

Step 5:- Create Lightning Component : expandAndCollapseDetailscmp.cmp

From Developer Console >> File >> New >> Lightning Component

expandAndCollapseDetailscmp.cmp [Lightning Component File]

Step 6:- Create Lightning Component : expandAndCollapseDetailscmpController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

expandAndCollapseDetailscmpController.js [JavaScript Controller]

Originally published at https://www.w3web.net on August 16, 2020.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

No responses yet

Write a response