Question

When I click in my menubar, I have a div going down from the top. I need to make a function that upon the button link being clicked again it returns to the top. This is what I have tried so far:

HTML:

<div id="wrapper"><button id="top">&raquo;</button></div>
<div class="block"></div>

Javascript:

$("#top").click(function(){
  $(".block").animate({"top": "+=300px"}, "slow");
});

CSS:

div {
  position:absolute;
  background-color:#abc;
  left:50px;
  width:90px;
  height:90px;
  margin-top:5px;
}

#wrapper {

    top: 80px;
 }  


.block {
     margin-top:-95px;
  }   
​

Live DEMO

Answer 1

$("#top").on('click', function(){
    var elm = $(".block");
    elm.animate({"top": ((parseInt(elm.css('top'), 10)>10?"-=":"+=")+"300px")}, "slow");
});​

FIDDLE