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.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…