Change Accordion Text Color When Active

Hi. I have an accordion with two panels. The first panel is open on page load. My issue is with the text that is to be clicked to open the second panel. I want the text, which has a class of .open-close, to change from #FFA500 to #000 on hover, which worked. When that text is clicked and the second panel opens, I want the text color to change to #FFF. I can’t get the text to change to #FFF when the second panel opens. Below is my css. Again, the hover works, but the active doesn’t. Thank you in advance.

.open-close a:hover {
color:#000;
}
.open-close a:active {
color:#FFF;

I just want to be sure we’re talking about the same thing here. “active” only affects the link at the moment it’s activated; is that what you want, and what is not happening? (I’m asking because the wording of your question sounds rather as if you want the colour change to remain after the panel has opened.)

As Technobear pointed out :active only refers to the state of a link the instant it is clicked but disappears as soon as the mouse/key is released.

It sounds as me as though you want to style something in the panel that is currently open and to do that you will need to utilise a special class on that element’s parent which most likely your script is already doing (unless it is hard coding inline styles into the tag).

If you have a link to the site then we can determine if this can be done with your existing code or whether you will need to add some extra script to help.

I had a feeling it wasn’t active state. My site is here. It is a full page scroll homepage. The accordion is on the 8th full scroll section down. The five horizontal icons are contained in the first panel of the accordion which is open on load. The text “CLICK HERE FOR DETAILS” is what makes the first panel close and the second panel slide up to reveal content. The text is in an orange. When clicked, I want that text to change from orange to white after it slides up. Please let me know if my explanation is clear and thank you for the help!

Hi,

Assuming we are talking about the text “Click here for Details” only then I’m a little confused because if you change the text to white then it will match the white background and be invisible?

That will make it almost impossible to close the accordion again unless by accident.

The js is adding a class to that text so you can change it to white if you want like this:

.open-close.current a{color:#fff}

However if you actually wanted to hide it then instead use visibility:hidden (to preserve the space) or display:none (to collapse the space).

That is exactly what I want! Thank you PaulOB!

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