{"id":2535,"date":"2017-05-31T11:38:57","date_gmt":"2017-05-31T11:38:57","guid":{"rendered":"http:\/\/www.greytrix.com\/blogs\/salesforce\/?p=2535"},"modified":"2025-06-12T09:44:44","modified_gmt":"2025-06-12T09:44:44","slug":"expand-and-collapse-panel-using-lightning-component","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2017\/05\/31\/expand-and-collapse-panel-using-lightning-component\/","title":{"rendered":"Expand and Collapse panel using Lightning Component"},"content":{"rendered":"

As mentioned in our previous blogs, we have already seen how to use Lightning Components in our Visualforce pages<\/a> and we have also seen how to implement the look and feel of Lightning in our Visualforce pages using SLDS system<\/a>. 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.<\/p>\n

The \u201c \u201d 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.<\/p>\n

For its creation, we need to create a Lightning component which will constitute of a 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\u2019s jump right into it.<\/p>\n

Create a Lightning Component via your developer console or through your IDE. Let\u2019s say the name of your Lightning component is \u201cExpand_Collapse_Panel\u201d it\u2019s relevant controller and other classes will be created. Use the below-mentioned code in your Lightning component.<\/p>\n

\"Lightning<\/a>

Lightning Component<\/p><\/div>\n

Your Controller for Lightning component will consist of the below mentioned lines of code.<\/p>\n

\"Controller\"<\/a>

Controller<\/p><\/div>\n

And its helper class would be as below.<\/p>\n

\"Helper<\/a>

Helper class<\/p><\/div>\n

Include the style classes so that you are able to toggle back and forth for expanding and collapsing the panel.<\/p>\n

\"Style<\/a>

Style class<\/p><\/div>\n

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.<\/p>\n

\"Lightning<\/a>

Lightning App<\/p><\/div>\n

\"Visualforce<\/a>

Visualforce Page block-collapse<\/p><\/div>\n

\"Visualforce<\/a>

Visualforce Page block-expand<\/p><\/div>\n

\"Lightning<\/a>

Lightning Panel-collapse<\/p><\/div>\n

\"Lightning<\/a>

Lightning Panel-expand<\/p><\/div>\n

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

About Us<\/strong><\/span>
\nGreytrix<\/a>\u00a0as a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners across the globe. We offers Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that requires apex code incorporation into the Salesforce platform.<\/p>\n

Greytrix<\/a>\u00a0has some unique solutions for Cloud CRM such as Salesforce integration with\u00a0Sage Enterprise Management (Sage X3<\/a>),\u00a0Sage Intacct, Sage 100\u00a0<\/a>and\u00a0Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM\u00a0Salesforce customization and development services<\/a> along with services such as Salesforce Data Migration<\/a>, Integrated App development<\/a>, Custom App development<\/a> and Technical Support<\/a> to business partners and end users.<\/p>\n

Greytrix GUMU™ integration for Sage ERP \u2013 Salesforce is a 5-star app listed on Salesforce AppExchange<\/a>.<\/p>\n

For more information, please contact us at\u00a0salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n

Related Posts<\/strong><\/span><\/p>\n