Hide div when clicking outside the table

Question

I am quite new to Javascript (intermediate in HTML & CSS), though I am pretty good at working things out on my own by looking up other's examples. Unfortunately, I am having significant trouble with this one.

I have a table displaying 3 links to the viewer. Each link when clicked, slides a hidden div open to the right. When one of the other links are clicked, the opened div slides back to being hidden, and then the other one slides open.

What I am looking for, is to hide the divs again when the mouse is clicked on the link again, and also when the mouse is clicked outside the div (or anywhere on the page, really).

I have tried using "e.stopPropagation" but it doesn't seem to be working for me.

Any help is greatly appreciated - thank you.

I have a jsFiddle that I created for practice: http://jsfiddle.net/AuU6D/3/

This is my jQuery code:

jQuery(function ($) {
    $('a.panel').click(function () {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active'),
            animIn = function () {
                $target.addClass('active').show().css({
                    left: -($target.width())
                }).animate({
                    left: 0
                }, 500);

            };

        if (!$target.hasClass('active') && $other.length > 0) {
            $other.each(function (index, self) {
                var $this = $(this);
                $this.removeClass('active').animate({
                    left: -$this.width()
                }, 500, animIn);                
            });
        } else if (!$target.hasClass('active')) {
            animIn();

    }

    });

});

Answer 1

Try

jQuery(function ($) {

    $('a.panel').click(function () {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active'),
            animIn = function () {
                $target.addClass('active').show().css({
                    left: -($target.width())
                }).finish().animate({
                    left: 0
                }, 500);

            };

        if (!$target.hasClass('active') && $other.length > 0) {
            $other.each(function (index, self) {
                var $this = $(this);
                $this.removeClass('active').animate({
                    left: -$this.width()
                }, 500, animIn);                
            });
        } else if (!$target.hasClass('active')) {
            animIn();
        } else if ($target.hasClass('active')) {
                $target.removeClass('active').finish().animate({
                    left: -$target.width()
                }, 500);                
        }

    });

    $(document).click(function(e){
        var $target = $(e.target), $active = $('div.panel.active');

        if($active.length && $target.closest('a.panel').length == 0 && $target.closest($active).length == 0){
                $active.removeClass('active').finish().animate({
                    left: -$active.width()
                }, 500);                
        }
    })

});

Demo: Fiddle

Answer 2

DEMO

 $(document).click(function (e) {
        if (!$(e.target).hasClass('panel')) {
            $('div.panel').removeClass('active').removeAttr('style').css('background', ' #e4e4e4');
        }
    });

or

DEMO

$(document).click(function (e) {
    console.log($(e.target).hasClass('panel'));
    if (!$(e.target).hasClass('panel')) {
        $('div.panel.active').removeClass('active').finish().animate({
            left: -$('#right').width()
        }, 500);
    }
});