jQuery click detection outside of specified area problem

Question

Hey guys, ok, so, I have a jPlayer jQuery plugin playlist hidden on my home page (http://www.marioplanet.com).

Now, it is hidden by default and is only supposed to be activated upon clicking the image labeled "Music" in the upper-right-hand-corner of my header <div>.

This works great, and once an end-user clicks the image, a nice, slick slideToggle action occurs on the <div id="player"> element and it is revealed.

Now, everything holds.

Until, the end-user clicks anywhere except the Music image again, the <div id="player"> element will slideToggle yet again, vanishing.

The only problem, is when the end-user clicks upon the Music image again, because, as far as I know, it slideToggles twice!

That is definitely not what we want.

So, here is the code which was adapted by Magnar's helpful post:

$('#text_music').click(function() {
    $('#jplayer').slideToggle(500, function() {
        $("body").click(function (event) {
            var outside = $(event.originalTarget).parents("#popup").length === 0;
            if (outside) {
                $("#jplayer").slideToggle(500);
                $("body").unbind("click");
            }
        });
    });
});

#text_music is my image reading "Music"
#jplayer is my <div> containing my jPlayer plugin

So, what I want to try and do is declare a variable, just like how var outside is declared in the above code, which handles with the clicking of the #text_music image once the #jplayer <div> is already visible.

However, I need a little assistance in understanding the meaning of this variable.

Anyone want to offer any words of wisdom?

:) Thanks!

Answer 1

Have a look at jQuery outside events plugin to detect events outside of the specific element.