Question

Does anyone know why the following jQuery code doesn’t work as expected?

HTML:

<div id="languageContainer">
    <div class="headerButton"></div>
</div>

CSS:

.headerButtonClicked
{
background-image:url('background.jpg');
background-repeat:repeat-x;
color:#000000;
}

jQuery:

$(".headerButton").click(function()
{
    $(this).parent().toggleClass(".headerButtonClicked");
});

I observed the DOM using Firebug and the class is appended to the parent element, but the style doesn’t change. When I added the styling code inline it worked, so I am sure that it is not the CSS that is the problem.

Thanks in advance for any help.

Answer 1

It’s because of the dot (.) – toggleClass() accepts class name, not a selector.

Try:

$(".headerButton").click(function()
{
    $(this).parent().toggleClass("headerButtonClicked");
});

jsFiddle