Salesforce Lightning Component – expand and collapsable panel example

In previous blog post, we saw that how Lightning component bundles are related to each other and how to create simple Hello World component.

In this post, we will create very simple yet powerful reusable lightning component for collapse and expand panel. This time, we will skip basics of lightning and directly start with code.

Complete component is build with plain javascript and CSS, no library used.

Lightning CollapsiblePanel Component - Collapsed
Lightning CollapsiblePanel Component – Collapsed
Lightning CollapsiblePanel Component - Expanded
Lightning CollapsiblePanel Component – Expanded

 

CollapsiblePanel.cmp [Component]

In above component, I have used body parameter as facet so that any lightning component can be used in body.

In above code, we are passing <ui:message> lightning component as a body, to show how one lightning component can be passed as parameter to another component.

<aura:set> is used to set facet in custom lightning component created.


Posted

in

,

by

Comments

10 responses to “Salesforce Lightning Component – expand and collapsable panel example”

  1. Jayshree Avatar
    Jayshree

    Hi Jit,
    This blog is very easy to understand and to clear the concept !!

    Also I tried with the change in function ToggleCollapse in IF condition :
    ( parElement.childNodes[i].classList[0] == “container” )
    instead of

    (parElement.childNodes[i].className && parElement.childNodes[i].className.indexOf(“container”) > -1)

    This gives me same result. 🙂

    Thanks & Regards,
    Jayshree.

    1. Jitendra Zaa Avatar

      Thats nice Jayshree. In your code you are expecting first class will always “Container” , what if sequence change ? I am afraid in that case code will not work.

  2. Nagendra Singh Avatar
    Nagendra Singh

    Hi Jit,

    Thanks for wonderful post !!.
    For me above code is not working. I tried above code and found ‘curElement.innerText’ is not picking ‘[ + ]’ or
    ‘[ -]’ so it is not showing container. Could you please help me out ?

    Best – Nagendra

  3. Zhenxin Wang Avatar
    Zhenxin Wang

    I used the sample code as it is, however found the curElement.innerText is empty string, wonder why. I am using Chrome.

    1. Jitendra Zaa Avatar

      Code is updated and made more simpler

  4. Gaurish Goel Avatar
    Gaurish Goel

    Thanks for the blog. It helped me a lot. I would like to give a suggestion: We can also use Lightning design system classes – “slds-is-collapsed” and “slds-is-expanded” instead of writing our own CSS.

    1. Jitendra Zaa Avatar

      Agree, but while writing this post, SLDS was not released.

  5. Sunil Madana Avatar
    Sunil Madana

    Hey Jitendra, Thanks for sharing the above code snippet and it really helped. For CollapsiblePanelHelper.js [Client side Helper] you can use the below code which worked for me unless you don’t want to change the “+” sign to “-“.

    1. Sunil Madana Avatar
      Sunil Madana

      ({
      ToggleCollapseHandler : function(component, event) {
      var existingText = component.get(“v.collpaseText”);
      var container = component.find(“containerCollapsable”) ;

      if(existingText === “[ – ]”){
      component.set(“v.collpaseText”,”[ + ]”);
      $A.util.toggleClass(container, ‘hide’); // this is same as jquery class that will toggle class names assigned.
      }else{
      component.set(“v.collpaseText”,”[ – ]”);
      $A.util.toggleClass(container, ‘hide’);
      }
      }
      })

      1. Jitendra Zaa Avatar

        Thanks buddy, made changes

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.