Accordion indicator reversed

Is there a way to reverse the accordion indicator so it is just to the right of the header text versus being all the way flush right to the entire width of the accordion?

Hi @wbgTHEMECO,

Thank you for writing in, please add this to the Accordion’s Element CSS area

$el .x-acc-header-content {justify-content: flex-end;}
$el .x-acc-header-text {
	flex: 0 0 auto;
}

We needed the justify-content: flex-end; because now the flow of your accordion title is from right to left, so right is the flex-start and left is the flex-end.

A Complete Guide to Flexbox

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

Thanks, that makes sense, but I described the scenario poorly.
I’m trying to flip the indicator to the other side of the text. If I use the reverse checkbox, the indicator is too far to the right.

Here is a screen shot of what where I’m trying to move the indicator to.

Is this possible?

Hi @wbgTHEMECO,

Yes, I understand that is what you’re trying to do, I’m sorry there is an error on my previous reply. The CSS I provided should go under your Accordion’s Element CSS area, not on the Theme Options > CSS.

Thanks,

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.