title: jquery show/hide div
body: <p>I have the next jquery code:</p>
  
  <pre><code>    &lt;script&gt;
      $(document).ready(function() {
          // hides the slickbox as soon as the DOM is ready
          // (a little sooner than page load)
        $('#hidden').hide();
  
      });
  
      //&lt;![CDATA[
      function ShowHide(){
          $('#hidden').fadeIn();
          $("#shopping-cart").animate({"height": "toggle"}, { duration: 550 });
      }
      //]]&gt;
  
      &lt;/script&gt;
  </code></pre>
  
  <p>I use the div#hidden to get a dark background over it (kind of lightbox background) and I'm showing the #shopping-cart div including some elements like table, input, etc. after make a click at a A.cart-buttom</p>
  
  <pre><code>&lt;a href="#" title="" onClick="ShowHide(); return false;" class="cart-buttom"&gt;Cart&lt;/a&gt;
  </code></pre>
  
  <p>After the user make a click at the A button, to show the cart, the div#hidden is showed. I'd like to know would I make if the user click outside of the div#shopping-cart or in the A link again the div#hidden is fadeOut.</p>
  
  <p>Now after make a click at the A link start the animation of the div#shopping-cart but the div#hidden doesn't dissapear.</p>
  
  <p>Any help is appreciated.</p>