custom accordion expand collapse and toggle lightning component

How to Create Custom Accordion Expand, Collapse and Toggle Section in Lightning Component | create lightning component Accordion Expand/Collapse/Toggle section in salesforce lightning component

299 views

Hey guys, today in this post we are going to learn about how to create a custom accordion Expand Collapse and Toggle section using JavaScript in Salesforce lightning component.

Files we used in this post example:-

customAccordionApp.app Lightning Application It is used for call the component to preview on browser.

customAccordionCmp.cmp

Lightning Component It is used for create a accordion list item section.

customAccordionCmpcontroller.js

Lightning Component Controller It is used for click functionality that is Expand Collapse and Toggle section in Lightning component.
customAccordionCmp.CSS Component Style CSS It is used for create custom Style CSS for Expandable/Collapsible & Toggle (Accordion) section.

Final Output

custom accordion expand collapse and toggle lightning component -- w3web.net

Other related post that would you like to learn in lightning component.

Step 1:- Create Lightning Application : customAccordionApp.app

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

customAccordionApp.app [Component Application File]

 

Step 2:- Create Lightning Component : customAccordionCmp.cmp

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

customAccordionCmp.cmp [Lightning Component File]

 

Step 3:- Create Lightning Component : customAccordionCmpcontroller.js

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

customAccordionCmpcontroller.js [JavaScript Controller]

 

Step 4:- Create Lightning Component Style: customAccordionCmp.CSS

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

customAccordionCmp.CSS [Style CSS]

custom accordion expand collapse and toggle lightning component -- w3web.net

 

Further post that would you like to learn in lightning component.

 

 


 

FAQ (Frequently Asked Questions)

What is accordion in Salesforce?

An accordion allows a user to toggle the display of a section of content. 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.

What is collapsible section in Salesforce?

Collapsible sections let users collapse or expand sections on their record detail pages by using the arrow icon next to the section heading. Sections remain expanded or collapsed until the user changes the settings for that tab.

What is collapse list?

A collapsible list will show and hide a given section of content when its heading is clicked. The collapsible list will appear initially as a series of Heading 5s or Heading 6s with an arrow next to each.

Related Topics | You May Also Like

  • Your reaction of the article ▾
 

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

8 thoughts on “How to Create Custom Accordion Expand, Collapse and Toggle Section in Lightning Component | create lightning component Accordion Expand/Collapse/Toggle section in salesforce lightning component”

  1. You’re a beautiful inspiration. It really helps me in any situation. Where I stuck. Many of my friends told me to comment there post but I stuck what I should comment. Finally I got your post it always help me. Thanks for the lovely post.

    Reply

Leave a Comment