title: jQuery click toggle animation
body: <p>I'm trying to learn how to use jQuery, and I've stumbled upon a problem. First off, I will show you the part of the code that causes the problem.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="nav"&gt;
  &lt;div id="button"&gt;&lt;p class="scroll" onclick="location.href='#ed';"&gt;Education&lt;/p&gt;&lt;/div&gt;
  &lt;div id="button"&gt;&lt;p class="scroll" onclick="location.href='#wxp';"&gt;Work Experience&lt;/p&gt;&lt;/div&gt;
  &lt;div id="button"&gt;&lt;p class="scroll" onclick="location.href='#oact';"&gt;Other Activities&lt;/p&gt;&lt;/div&gt;
  &lt;div id="button"&gt;&lt;p class="scroll" onclick="window.open('cv.pdf','mywindow');"&gt;View as PDF&lt;/p&gt;&lt;/div&gt;
  &lt;div id="arrow_container"&gt;&lt;div class="arrow" id="down"&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(document).ready(function(){
  $("#arrow_container").toggle(
    function () {
      $("#nav").animate({marginTop:"0px"}, 200);
        }, function () {
      $("#nav").animate({marginTop:"-100px"}, 200);
    });
  });
  </code></pre>
  
  <p>I want the div <code>#nav</code>, which is initially positioned partially outside of the screen, to move down when div <code>#arrow_container</code> is clicked. Then when <code>#arrow_container</code> is clicked again I want <code>#nav</code> to move up, to its original position.</p>
  
  <p>At the moment, non of this happens. Can you tell me what the problem is and how I can fix it?</p>
  
  <p>EDIT: <a href="http://jsfiddle.net/5vfkn/">a jsfiddle with the code, including some css</a></p>
  
  <p>EDIT 2: The problem seems to be solved. Also thanks to someone whose username I forgot and answer has been deleted, but he had some great tips! Thank you!</p>