Question

I have this jQuery call for a dropdown. On click, the background image of an inner container changes its background image. How do I change the background image for the inner container back?

$(document).ready(function () {
  $('#listH1').click(function () {
    $('#content1').slideToggle('medium');
    $(".span").css("background-image","url(carrow.png)");  
  });
});

Answer 1

I suggest using toggleClass():

CSS

.yourNewBackground {
    background-image: url(carrow.png);
}

JavaScript

$(document).ready(function () {
  $('#listH1').click(function () {
    $('#content1').slideToggle('medium');
    $(".span").toggleClass("yourNewBackground");
  });
});

EDIT

Here’s a working fiddle. A couple things to note:

• When working with a fiddle, make sure you select the appropriate framework. You had MooTools selected (the default), instead of jQuery.
• toggleClass() wasn’t working because of the span class. Adding !important to the toggleDown class was all that was needed.