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.

![Sub-Categories Hidden. Arrow Facing Down.](https://i.stack.imgur.com/iAMNU.jpg)

![Sub-Categories Showing. Arrow Should Be Facing Up.](https://i.stack.imgur.com/lkyuh.jpg)