title: Click on button to toggle display of another div
body: <p>I have a code that works perfectly to move elements from top, left, right or bottom sides, but seems to be, that it doesn't work with display property, here's my javascript code:</p>
  
  <pre><code>$('#icon-for-search').click(function () {
      var targetValue;
  
      if ($('#search-wrapper').css('top') == "0px") {
          targetValue = '55px';
      } else {
          targetValue = '0px';
      }
  
      $("#search-wrapper").animate({
          top: targetValue
          }, 500);
      });
  </code></pre>
  
  <p>I have a button with an id called "icon-for-search" and it toggles perfectly the top value of the #search-wrapper if it's clicked, but if I change it to display: block / none it doesn't work. Any particular reason? could someone explain me?</p>
  
  <pre><code>$('#icon-for-search').click(function () {
      var targetValue;
  
      if ($('#search-wrapper').css('display') == "none") {
          targetValue = 'block';
      } else {
          targetValue = 'none';
      }
  
      $("#search-wrapper").animate({
          display: targetValue
          }, 500);
      });
  </code></pre>