title: Changing from hover to click?
body: <p>I've recently implemented a small box on my website at the bottom of the page to expand when the mouse hovers over it... This is the code and it all works great. </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#box{
      position:absolute;
      width:300px;
      height:20px;
      left: 33%;
      right: 33%;
      min-width: 32%;
      bottom:0;
      background-color: #353535;
  }
  </code></pre>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>$('#box').hover(function() {
      $(this).animate({
          height: '220px'
      }, 150);
  },function() {
      $(this).animate({
          height: '20px'
      }, 500);
  });
  </code></pre>
  
  <p>But I'm curious about how I would go about changing this to open and close on a click rather than the mouse hovering over it?</p>
  
  <p>I've edited it to...</p>
  
  <pre><code>$('#box').click(function() {
      $(this).animate({
          height: '220px'
      }, 150);
  },function() {
      $(this).animate({
          height: '20px'
      }, 500);
  });
  </code></pre>
  
  <p>And this works to open the box. But I can't get it to close again with another click.</p>
  
  <p>So close yet so far! :P</p>