Question

I’ve been getting into jQuery again and obviously I’m missing something.

I want to add a class to an element depending on if another one is visible.

It’s hidden with display: none; and activated with slideToggle

I have this:

if ($("#about_me").is(':visible')){
        $("#about_me_clicker").addClass(".about_highlight"); 
    } else {
}

Now I’m assuming I’ve gotten it totally wrong, so here’s a fiddle for you to see.

How can I add this class to the certain div, if the other one is :visible?

Thanks.

Edit:

To make things clear, I will be only applying the class to the one element.

Answer 1

Change:

$("#about_me_clicker").addClass(".about_highlight");

To:

$("#about_me_clicker").addClass("about_highlight");

You don’t need to include the . in the class names for addClass.

Also, in your fiddle’s CSS:

.about_highlight
{
    color; #f00;
}

Should be:

.about_highlight
{
    color: #f00;
}

Another note, in CSS, ids take precedence over classes. So even though the div has class about_highlight, the color declared in #about_me_clicker will be active.

To fix this you can use !important.

.about_highlight
{
    color: #f00 !important;
}

To fix this, just make a more specific CSS rule.

#about_me_clicker.about_highlight
{
    color: #f00;
}

Updated fiddle: http://jsfiddle.net/YVqJ7/20/