In Lightning Accordion tag I need to change the location of the expand/collapse arrow so instead of it being in the left side of the title (aka the Accordion summary), it should be in the right side. Is there any way to accomplish that? or maybe another component which would achieve the same result?

  • Do you use the lightning:accordion component or did you only use the lightning design system? – Martin Lezer Oct 23 '18 at 15:08
  • I'm using the lightning:accordion component. – Elchanan Oct 23 '18 at 15:10

You can use the css order property and apply that property to the children like this:

.THIS .slds-accordion__summary-heading > button > span {
    order: 1;

.THIS .slds-accordion__summary-heading > button > lightning-primitive-icon {
    order: 2;

Gives you something like:

enter image description here

  • That's great, thanks! Only issue is that I loose the space between the Title and the arrow. – Elchanan Oct 23 '18 at 15:34
  • Figured that out. Add this to the 2nd item in order: order: 2; margin-left: 10px; – Elchanan Oct 23 '18 at 16:03

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.