Accordion changing color after interaction

I would like my accordions to “grey out” after someone has opened them. They are being used as a reading list and I want a visual cue that each section has been completed.

Hi There,

Please provide the URL of the page where you have placed the accordion and explain with more detail which part of the accordion you would like to turn to grey.

Would be the header or the content?

Let us know more details so we can provide you a tailored solution.

Thank you!

https://yourbcc.org/2017/january-2/

header with text I would like to turn that a light grey after someone opens it

Hello There,

Do you want something like this?

If that is the case, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-accordion-toggle:not(.collapsed) {
    background-color: #e5e5e5;
    color: #000;
}

.x-accordion-heading .x-accordion-toggle:not(.collapsed):before {
    color: #000;
}

Hope this helps. Please let us know how it goes.

1 Like

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