Changing icon on accordion

Support
#1

I’d like the icon on the accordion to be inverted caret when the accordion is closed and the caret (^) when the accordion is open. I started by trying to change the symbol and the color of the icon by using the following code, but that did not work. Please point me in the right direction.

.x-accordion-heading .x-accordion-toggle:before {
content: ^
color:# 5b86d2;

#2

Hello @eutaw,

Thanks for writing in!

Please be advised that you do not need to add any custom css. Please click your accordion element settings and find the Header Indicator Setup to be able to change the icon or a caret icon. There is alway the degrees rotation of the icon.

Please let us know if this works out for you.

#3

Thanks very much. Can the header be centered and the font-color of the header be changed via element settings or do I need CSS for that?

#4

Hi @eutaw,

You need to add HTML code inside the title and use the style tag to add whatever styling you like. I checked the website and found out that you already did that. So here is an example:

<span style="font-size: 24px; text-align:center; color:#5b86d2;"><strong>Text Content</strong></span>

Thank you.

#5

OK, thanks. Just wanted to know if there was another way to do it within the element.

#6

You’re welcome, @eutaw.

#7

There is one other thing regarding the accordion that I am struggling with. When I hover over the header, the icon changes to black. How do I change the color of the icon when hovering?

#8

I see the setting in the accordion element. No problem.

#9

Hi @eutaw,

Glad that you managed to find the option. I suggest that you also take a look at:

And in general, our documentation is your best friend in such cases:

Thank you.

#10

Thank you soooooo much for the doc links. Much appreciated!

#11

You’re welcome. :slight_smile:

#12

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