Accordion: Style Header of Single Accordion Item

[JanStrasser]

I want to give a different color to the header (button) of each accordion item. Assigning a class or an ID does not seem to work. Using “Element CSS” does not take any effect, too. I can style the headers by the class .x-acc-header, but when I add the individual class of the item (e.g. .acc1 .x-acc-header {}) it doesn’t work.

[basanta]

Hi There,

Thanks for writing in!

The custom class with CSS is working fine for me.

Please add a important to the CSS.
For example.

.acc1 .x-acc-header {
background: #333 !important;
}

Hope this works for you!

[JanStrasser]

@basanta

.acc1 .x-acc-header {
background: #333 !important;
}

Thank you, basanta. Problem solved.

[basanta]

You are welcome!