jquery show/hide div

Question

I have the next jquery code:

    <script>
    $(document).ready(function() {
        // hides the slickbox as soon as the DOM is ready
        // (a little sooner than page load)
      $('#hidden').hide();

    });

    //<![CDATA[
    function ShowHide(){
        $('#hidden').fadeIn();
        $("#shopping-cart").animate({"height": "toggle"}, { duration: 550 });
    }
    //]]>

    </script>

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

<a href="#" title="" onClick="ShowHide(); return false;" class="cart-buttom">Cart</a>

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.

Now after make a click at the A link start the animation of the div#shopping-cart but the div#hidden doesn't dissapear.

Any help is appreciated.

Answer 1

If you want to toggle fading on click of the link, you can use toggle(),

$("a.cart-buttom").toggle(function(){
  $('#hidden').fadeIn(); 
}, function() {
  $('#hidden').fadeOut(); 
})

Answer 2

First, let's remove that click handler from being inline, so your link becomes this:

<a href="#" class="cart-buttom">Cart</a>

Then your jQuery looks like this:

$(function() {
  $('#hidden').hide().click(function(e) {
    e.stopPropagation();
  });      
  $("a.cart-buttom").click(function(e) {
    $('#hidden').animate({ opacity: "toggle" });
    $("#shopping-cart").animate({"height": "toggle"}, { duration: 550 });
    e.stopPropagation();
  });
  $(document).click(function() {
    $('#hidden').fadeOut();
  });
});

You can give it a try here

What we're doing here is taking advantage of event bubbling, using event.stopPropagation() if a click comes from the <a> or #hidden, the event doesn't go anywhere (doesn't bubble up to document, as it normally would). If a click from anywhere else gets to document then it does a .fadeOut() on the element, the same goes for clicking on the "Cart" link again.