{"id":4493,"date":"2015-05-22T05:01:02","date_gmt":"2015-05-22T05:01:02","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=4493"},"modified":"2017-08-09T03:29:08","modified_gmt":"2017-08-09T03:29:08","slug":"create-collapsible-panel-component-in-lightning","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-collapsible-panel-component-in-lightning\/","title":{"rendered":"Salesforce  Lightning Component &#8211; expand and collapsable panel example"},"content":{"rendered":"<p style=\"text-align: justify;\">In previous blog post, we saw that how Lightning component bundles are related to each other and <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/getting-started-with-basics-of-lightning-component\/\">how to create simple Hello World component<\/a>.<\/p>\n<p style=\"text-align: justify;\">In this post, we will create\u00a0very simple yet powerful reusable lightning component for collapse and expand panel. This time, we will skip basics of lightning and directly start with code.<\/p>\n<p style=\"text-align: justify;\">Complete component is build with plain javascript and CSS, no library used.<\/p>\n<figure id=\"attachment_4494\" aria-describedby=\"caption-attachment-4494\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Collapsed.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-4494\" src=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Collapsed.png?resize=600%2C35&#038;ssl=1\" alt=\"Lightning CollapsiblePanel Component - Collapsed\" width=\"600\" height=\"35\" srcset=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Collapsed.png?w=952&amp;ssl=1 952w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Collapsed.png?resize=300%2C17&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Collapsed.png?resize=624%2C36&amp;ssl=1 624w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><figcaption id=\"caption-attachment-4494\" class=\"wp-caption-text\">Lightning CollapsiblePanel Component &#8211; Collapsed<\/figcaption><\/figure>\n<figure id=\"attachment_4495\" aria-describedby=\"caption-attachment-4495\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"wp-image-4495\" src=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=600%2C163&#038;ssl=1\" alt=\"Lightning CollapsiblePanel Component - Expanded\" width=\"600\" height=\"163\" srcset=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?w=953&amp;ssl=1 953w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=300%2C82&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=624%2C170&amp;ssl=1 624w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><figcaption id=\"caption-attachment-4495\" class=\"wp-caption-text\">Lightning CollapsiblePanel Component &#8211; Expanded<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p><!--more--><\/p>\n<p><span style=\"text-decoration: underline;\">CollapsiblePanel.cmp<\/span> [Component]<\/p>\n<p><script src=\"https:\/\/gist.github.com\/JitendraZaa\/68af9bd5b06b46cd431e8e425bda11d3.js\"><\/script><\/p>\n<p>In above component, I have used body parameter as facet so that any lightning component can be used in body.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/JitendraZaa\/a4bbd76ccaf34fc8b56fe9ac85d9c93e.js\"><\/script><\/p>\n<p>In above code, we are passing <strong>&lt;ui:message&gt;<\/strong> lightning component as a body, to show how one lightning component can be passed as parameter to another component.<\/p>\n<p><strong>&lt;aura:set&gt;<\/strong> is used to set facet in custom lightning component created.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to use aura:facet component and Learn creating expand and collapsable reusable lightning component in Salesforce<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[310,9],"tags":[298,311],"class_list":["post-4493","post","type-post","status-publish","format-standard","hentry","category-lightning","category-salesforce","tag-aura","tag-lightning-component"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":4646,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/compliation-of-resources-to-learn-lightning-components-in-salesforce\/","url_meta":{"origin":4493,"position":0},"title":"Compilation of resources to learn Lightning Components in Salesforce","author":"Jitendra","date":"July 8, 2015","format":false,"excerpt":"An attempt to gather all resources to learn Salesforce lightning component in one blog post","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7058,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/gravatar-reusable-lightning-web-component\/","url_meta":{"origin":4493,"position":1},"title":"Gravatar &#8211; Reusable Lightning Web Component","author":"Jitendra","date":"May 2, 2020","format":false,"excerpt":"Avoid asking your users to upload pictures - Use Globally Recognized Avatar , Reusable Lightning Web Component","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Gravatar - Reusable Lightning Web Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":4102,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-faq-part-20-lightning-questions\/","url_meta":{"origin":4493,"position":2},"title":"Salesforce interview question related to Lightning framework &#8211; Part 20","author":"Jitendra","date":"February 4, 2015","format":false,"excerpt":"Salesforce interview questions for Salesforce developers and admin , mostly related to newly released Salesforce Lightning components and applications","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4461,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/getting-started-with-basics-of-lightning-component\/","url_meta":{"origin":4493,"position":3},"title":"Getting started with basics of Lightning Component","author":"Jitendra","date":"May 19, 2015","format":false,"excerpt":"As you might already know\u00a0that next big change in Salesforce is introduction to lightning components. As technology is changing rapidly and to take advantage of cutting edge innovations in web technology, Salesforce doesn't want to stay behind. If we see trend, all major platform has introduced component based design like\u2026","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Getting started with Lightning component Output","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Getting-started-with-Lightning-component-Output.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":7072,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/share-javascript-code-in-lightning-web-component-to-read-url-parameters\/","url_meta":{"origin":4493,"position":4},"title":"Share JavaScript Code in Lightning Web Component to Read URL Parameters","author":"Jitendra","date":"May 4, 2020","format":false,"excerpt":"Building Reusable LWC Component to read query string from URL","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6176,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lookup-component-in-salesforce-lightning\/","url_meta":{"origin":4493,"position":5},"title":"Lookup component in Salesforce Lightning","author":"Jitendra","date":"July 6, 2017","format":false,"excerpt":"Salesforce Lightning component in plain JavaScript and SLDS with complete source code","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Lightning Lookup Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=4493"}],"version-history":[{"count":8,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4493\/revisions"}],"predecessor-version":[{"id":6199,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4493\/revisions\/6199"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=4493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=4493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=4493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}