Accordion Element CSS

[chadfahlman]

Hi again.
I’m styling a classic accordion element with CSS. I’ve managed to edit the header background and text. The new background color is white and I would like to change the sub indicator icon color. Is this possible through CSS?

I am using Pro Theme.

Thanks again!
Chad

[nico]

Hi @chadfahlman,

Thanks for writing in.

You can check the links below for guide on how to customize your accordions.

Classic Accordion Element - Text / Background Color, Transparency, Plus Sign

Accordion customization with css

Hope it helps.

Let us know how it goes.

Thanks.

[chadfahlman]

Hi there,
I read through both threads and didn’t find much pertaining to the sub indicator. This is the most relevant snippet.

/hide the + icon/
.custom-accordion .x-accordion-heading .x-accordion-toggle:before {
content: “”;
}

Theoretically I can add a ‘color: black;’ code line, but this doesn’t alter anything.

[paul.r]

Hi,

You can try this code instead.

.x-accordion-heading .x-accordion-toggle.collapsed:before {
    color: red;
}

/* on hover */
.x-accordion-heading .x-accordion-toggle:hover {
    color: blue;
}

Hope that helps.