Jquery - toggleClass Not Changing Background Image

everyone. I have searched this website and many others to understand why the toggleClass function isn't working in my Jquery code, and though I have found several different explanations, they didn't match what I want my effect to do.

I am very new to Jquery and so I am unsure of Jquery functions. Here is my Jquery code:

$("document").ready(function(){
   $("div#btn-slide").click(function(){
      $("div#panel").slideToggle("slow");
      $("div#btn-slide").toggleClass("smallbox");
   });
});

Here is my HTML code.

<div id="panel">
</div>

<div id="btn-slide">开发者_开发知识库
</div>

The effect I'm looking for here is very simple. When the smaller div (btn-slide) is clicked, the bigger div (panel), which is above the smaller div, will raise up into the browser screen until completely hidden, this is why I'm using the slideToggle("slow") function.

Then the last thing I want done is for the smaller div (btn-slide) to change its background image. This is why I'm using toggleClass("smallbox"). The smallbox class is in my CSS file and has a background image in it of an arrow pointing down. This is the image I want showing in my smaller div (btn-slide) when the bigger div (panel) has slid into its hidden place.

The only way I've gotten this to work is by going into my CSS file, and placing !important onto the end of the background-image of the 'smallbox' CSS class, but I want to know the proper Jquery technique for this effect.

NOTE: I want to be able to click the smaller div (btn-slide) and have the background image change to its appropriate arrow every time I click it.

How do I accomplish this effect?

Thank you!

UPDATE: I'm very grateful for all your replies. Ok, all of your replies had got me thinking and so I once again reviewed the toggleClass function and I believe I've gotten the code to work correctly now. Here is my CSS code.

#PANEL {
        width: 240px;
        height: 320px;
        background-color: #000000;
        margin: 0px auto;
    }

    #BUTTON {
        width: 100px;
        height: 50px;
        background-image:url(Arrow_Up.jpg);
        background-repeat: no-repeat;
        margin: 0px auto;
    }

    #BUTTON.GoUp {
        background-image:url(Arrow_Down.jpg);
    }

Now, what my mistake had apparently been was that I was adding the class .GoUp by itself with the designated background-image instead of appending the new class to #BUTTON. I changed the code and everything seems to work properly now.

Thank you all again for your fast replies!

The problem is that when your css is loaded the DOM is only loading the Arrow_Up.jpg image. It's not loading the Arrow_Down.jpg. CSS can't dynamically load images.

Possible solutions:

• Use JS to load the images on the fly (see this SO answer)
• Ensure the image is loaded on page load by placing the Arrow_Down.jpg image in the background of another element and hide it using display: none. Then you can use JS to add and remove a class. Codepen

Your method of adding !important is correct. You are introducing a second background-image directive to the div, so you have to be explicit as to which one you want it to use, hence !important.

If you really want a pure jQuery solution, you can either toggle both background classes, so that only one is active at a time (not a good solution, because now you have to duplicate all your other css directives into both classes, which is always a bad sign)

Or you can use the css function to toggle the background, something like;

if($("div#btn-slide").css("background-image") == "uparrow.jpg") {
   $("div#btn-slide").css("background-image", "downarrow.jpg");
}
else $("div#btn-slide").css("background-image", "uparrow.jpg");

Can you post your CSS? You don't actually need to use !important, BUT you need to make sure the 'smallbox' class selector is more specific than 'btn-slide' ID. For example, in your CSS file:

#btn-slide { background: url(oldimage.png) }
#btn-slide.smallbox { background: url(newimage.png) }