Expand and Collapse panel using Lightning Component

By | May 31, 2017

As mentioned in our previous blogs we have already seen how to use Lightning Components in our Visualforce pages and we have also seen how to implement the look and feel of Lightning in our Visualforce pages using SLDS system. As it stands it does seem like one way traffic as we are only implementing Lightning and its design systems in our Salesforce Classic environment, so in this blog we would like to go the other way around and implement something that’s available in Salesforce Classic into our Lightning system.

The “” tag can create a collapsible panel/section which based on click can expand and collapse the section/panel based on whether the user wants to see the section/panel or not. Although implemented in Visualforce pages for Salesforce Classic after some research we did find a quick solution to implement a collapsible panel in lightning as well.

For its creation, we need to create a Lightning component which will constitute of controller, helper class and style class. And for previewing and testing purpose we will be creating a Lightning app for the same. So without any further ado, let’s jump right into it.

Create a Lightning Component via your developer console or through your IDE. Let’s say the name of your Lightning component is “Expand_Collapse_Panel” it’s relevant controller and other classes will be created. Use the below mentioned code in your Lightning component.

Lightning Component

Lightning Component

Your Controller for Lightning component will consist of the below mentioned lines of code.

Controller

Controller

And its helper class would be as below.

Helper class

Helper class

Include the style classes so that you are able to toggle back and forth for expanding and collapsing the panel.

Style class

Style class

And finally, to preview and test the same we will create a Lightning App that will refer your Lightning component and you can test the changes accordingly.

Lightning App

Lightning App

Visualforce Page block-collapse

Visualforce Page block-collapse

Visualforce Page block-expand

Visualforce Page block-expand

Lightning Panel-collapse

Lightning Panel-collapse

Lightning Panel-expand

Lightning Panel-expand

For a more detailed and advanced example you can refer to this blog which would not only help you understand but would also help you delve on the same.

Also Read:
1. Creating a VisualForce Page with the help of Lightning Design System
2. GUMU™ Feature – Promote Sales Order from Salesforce to Sage 300 ERP
3. Avoiding API Limits in Test Classes

About Us
Greytrix is one stop solution provider for Sage ERP and Sage CRM needs. We provide complete end-to-end assistance for your technical consultations, product customization’s, data migration, system integrations, third party add-on development and implementation expertise.

Greytrix have some unique solutions for Cloud CRM such as Salesforce integration with Sage X3, Sage 100 and Sage 300. We also offer best-in-class Cloud CRM Salesforce customization and development services to business partners and end users. Greytrix have some unique solutions for On-Premise CRM such as Sage CRM integration with Sage X3, Sage 100, Sage 300, Sage 500 and Sage 50 . We also offer best-in-class On-Premise Sage CRM customization and development services to business partners and end users.

For more information, please contact us at salesforce@greytrix.com. We will be glad to assist you.