JQuery click toggle animation

Question

I am trying to learn how to use jQuery and I came across a problem. First of all, I will show you the part of the code that causes the problem.

HTML

<div id="nav"> <div id="button"><p class="scroll" onclick="location.href='#ed';">Education</p></div> <div id="button"><p class="scroll" onclick="location.href='#wxp';">Work Experience</p></div> <div id="button"><p class="scroll" onclick="location.href='#oact';">Other Activities</p></div> <div id="button"><p class="scroll" onclick="window.open('cv.pdf','mywindow');">View as PDF</p></div> <div id="arrow_container"><div class="arrow" id="down"></div></div> 

JQuery

 $(document).ready(function(){ $("#arrow_container").toggle( function () { $("#nav").animate({marginTop:"0px"}, 200); }, function () { $("#nav").animate({marginTop:"-100px"}, 200); }); }); 

I want the div #nav , which was originally partially off screen, to move down when I click div #arrow_container . Then, when I press #arrow_container I want #nav move up to its original position.

This is not happening at the moment. Can you tell me what the problem is, and how can I fix it?

EDIT: jsfiddle with code including some css

EDIT 2: The problem seems to be resolved. Also thanks to someone whose username I forgot and the answer was deleted, but he had some great tips! Thanks!

Answer 1

Try the following:

 $("#arrow_container").click( function(event){ event.preventDefault(); if ( $(this).hasClass("isDown") ) { $("#nav").stop().animate({marginTop:"-100px"}, 200); } else { $("#nav").stop().animate({marginTop:"0px"}, 200); } $(this).toggleClass("isDown"); return false; }); 

http://jsfiddle.net/us6sohyg/5/

Answer 2

for me, which did not work up to 100%, I had to edit the stop () event before each animation. So:

 $("#arrow_container").click( function(event){ event.preventDefault(); if ($(this).hasClass("isDown") ) { $("#nav").stop().animate({marginTop:"0px"}, 200); $(this).removeClass("isDown"); } else { $("#nav").stop().animate({marginTop:"-100px"}, 200); $(this).addClass("isDown"); } return false; });