title: Jquery - animate height toggle
body: <p>I have a 10px bar along the top of the screen that, when clicked, I want it to animate to a height of 40px and then if clicked again, animate back down to 10px. I tried changing the id of the div, but it isn't working. How could I get this to work, or is there a better way to do it?</p>
  
  <p>body html:</p>
  
  <p><code>&lt;div id="topbar-show"&gt;&lt;/div&gt;</code></p>
  
  <p>css:</p>
  
  <pre><code>#topbar-show { width: 100%; height: 10px; background-color: #000; }
  #topbar-hide { width: 100%; height: 40px; background-color: #000; }
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>$(document).ready(function(){
    $("#topbar-show").click(function(){
      $(this).animate({height:40},200).attr('id', 'topbar-hide');
    });
    $("#topbar-hide").click(function(){
      $(this).animate({height:10},200).attr('id', 'topbar-show');
    });
  });
  </code></pre>