title: Javascript display onclick with an animation
body: <p>I want to animate a simple search form. Before the click event, it is hidden behind my fix nav bar (<code>margin-top:-47px</code>). When the user clicks a search button, I want to set the form's margin-top property to 0px so it shows on the page.</p>
  
  <p><a href="http://jsfiddle.net/6drVH/%C3%A0" rel="nofollow">jsFiddle</a></p>
  
  <p>I am using this HTML :</p>
  
  <pre><code>&lt;nav&gt;
    &lt;a data-icon="search" class="search-form-toggle"&gt;&lt;/a&gt;
  
  ...
  &lt;div class="form search-form"&gt;
                  &lt;fieldset data-icon="search"&gt;
                      &lt;input type="search" placeholder="Search..."&gt;
                  &lt;/fieldset&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>And this CSS :</p>
  
  <pre><code>.search-form {
      margin-top: -47px;
  }
  </code></pre>
  
  <p>And the following javascript (jQuery) :</p>
  
  <pre><code>$('.search-form-toggle').click(function(){
      if($(".search-form").css("margin-top") == "-47px") {
          $(".search-form").animate({margin-top: "0px"}, 1000);
      } else {
          $(".search-form").animate({margin-top: "-47px"}, 1000);
      }
      return false;
  });
  </code></pre>
  
  <p>When I click the button, it is not working... I guess it is a Javascript issue?</p>
  
  <p>Plus, can I achieve the same result (nice transition) without using jQuery?</p>