Changing up and down arrow with jquery

Question

Why won't this jQuery change my image to a down arrow like I want it to? When a user opens a drop down, the up arrow changes to a down arrow. I'm doing this with an if else because I don't know any easier way, but it's not working. The arrow stays up the entire time, no matter how many times I click. Here is the jQuery. Should be all thats needed. Thanks!

    $("h3#mpcClients").click(function() {
            $("#hidden0").slideToggle(500); 

            var up = true;

            if (up == true) {

            $("td h3").css("background-image", "url(http://www.crm-newsletter.com/client-emails/images/arrowDown.png)");
            up=false;
          }
            else if(up == false) {
                $("td h3").css("background-image", "url(http://www.crm-newsletter.com/client-emails/images/arrowUp.png)");
            up=true;
            }
            });

Answer 1

See .toggleClass() and set up some css like so:

.up {
    background-image: url("http://www.crm-newsletter.com/client-emails/images/arrowDown.png")
}
.down {
    background-image: url("http://www.crm-newsletter.com/client-emails/images/arrowDown.png")
}

Make sure you set up the html to a default arrow direction like so:

<td>
    <h3 class="up">Some text</h3>
</td>

Now for the js to change the css classes of the element:

$("h3#mpcClients").click(function() {
        $("#hidden0").slideToggle(500);

        // This adds a class if the element doesn't already have it
        // if the element already has the class it will remove it.
        $("td h3").toggleClass("up down"); 
});