I have a requirement to be able to split a Lightning Component into two panels with the right panel expandable/collapsible. Similar in a way to sections but sections act in the opposite way, they expand/contract vertically instead of horizontally. lightning component expandable section

Does anyone know if a horizontal equivalent exists which I can use for building panels similar'ish to sections but horizontally?

Thanks in advance for any tips on this. I hope I've explained the above ok. I don't have any mock-ups unfortunately to help explain it.


No, there's no such thing, directly speaking. However, you can do this pretty easily with lightning:layout/layout:item:

<aura:attribute name="sideCollapsed" type="Boolean" default="true">
  <lightning:layoutItem size="{!v.sideCollapsed?12:8}">
    Left Side Content
  <lightning:layoutItem class="{!v.sideCollapsed?'slds-hide':''}" size="4">
    Right Side Content

Toggling sideCollapsed will expand/collapse this side bar. You can experiment with various designs, such as adding padding or other elements within, etc.

  • Hi sfdcfox, Thanks. Apologies I got totally sidetracked since I initially posted the question. The layoutItems work well. One thing I've trying to figure out is how to replicate the detail & related tabs within a layoutItem. I can use forceChatter for chatter functionalities but for standard detail & related sections, I know force:recordData can be used but this does not seem to appear in a layoutItem. For lightning:recordViewForm and lightning:recordEditForm do you know if there is a way to expose all fields from the page layout without individually specifying them? Thanks. – RedQueries Apr 18 at 10:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.