javascript - Is there an easy way to toggle background position between two states on click event?

Question

I have a drop down price list broken down into bite size chunks for easier viewing, there are several services being offered and some services break down into sub-categories, the user can click on a button with a little arrow pointing down, on clicking the button another level of sub categories is slideToggle revealed. The arrow button stays at the bottom so that they can hide the sub categories when ready.

I was hoping to change the arrow from pointing down when hiding sub-categories, to up when showing them. I already have an image prepared with both arrow states in one png, I just need a command/set of commands that will toggle the arrow between states when hiding/showing the sub categories.

The arrow lies within this HTML as a background image for the .arrows div.

<div class="morebutton" id="firstarrow">

    <div class="arrows">

    </div>

</div>

This is the CSS:

.morebutton{
width:220px;
height:8px;
border:outset 1px #ddd;
/*margin-bottom:5px;*/
margin-left:auto;
margin-right:auto;
margin-top:0px;
background:#ddd;
border-radius:25px;
cursor:pointer;
overflow:hidden;
}

.morebutton:hover{
background:#eee;
height:15px;        
}

.arrows{
width:20px;
height:15px;
margin:0px auto;
background:url(images/morearrows.png) no-repeat 0px 0px;
}

This is the current jQuery on the elements:

$("#firstarrow").click(function(){
    $("#londonmore").slideToggle(100);
});
//this reveals the sub-categories in a table called #londonmore

Here's what I have tried (within the function above):

$(this).toggle( 
    function(){ 
        $(".arrows").css({"background-position":"0px"}); 
    },  
    function(){ 
        $(".arrows").css({"background-position":"10px"}); 
});

I have tried playing about with the amounts the background position changes but all it does is move the arrow slightly, it doesn't move it on the first click and doesn't move to the position I want it in, also it doesn't move back on hiding the sub-categories.

Answer 1

This answer is going to have to be a bit general as you haven't posted any code yet, but there is a callback you get on .slideToggle(). Use that to do the .css()

You'll just have to check which state you're in so you set the right arrow.

For example:

    $('#button1').slideToggle('slow',function() {
        if ( ... ) {
            $('#arrow1').css('background-position','?px ?px');
        } else {
            $('#arrow1').css('background-position','?px ?px');
        }
    });

You'll have to fill in the blanks - or you could implement the callback in another way, but whatever you do if you want to do the css change when the slideToggle fires, using the callback is the way to go.