CODEWITHSUNDEEP
javascriptjqueryfunctiontriggers
R.J.
R.J.

Reputation: 648

jQuery - Toggle a panel closed on click of outside element, only if panel is visible

I'm working on this site: http://dev.rjlacount.com/treinaAronson/index.php

My final to-do is to set the contact panel (which you can see if you click the top left "contact" button) to close if it's currently open and the user either clicks outside of the panel (in the "#content" area) or hits the esc key.

I figured the clicking in the #content area trigger would be the easier of the two, so I started with that. I've read a couple threads on triggering functions only if elements are visible, but what I've come up with so far isn't working at all:

$("#panel").is(":visible") {
  $("#content").click(function(){
    $("#panel").slideToggle("3000");
  });
};

This breaks the functionality of the contact button, and I've tried several variations of this to no avail. Am I making any glaring errors here? Any advice would be greatly appreciated.

Thanks!

Upvotes: 1

Views: 2692

Answers (3)

Marlin
Marlin

Reputation: 749

Bind Click and Keydown functions to the document and make sure the click function doesn't bubble up to the document when your panel or flip buttons are clicked. Like so: 

$(document).bind({
    keydown:function(e) {
        if (e.keyCode == 27 ) {
            $("#panel").slideUp("3000");
        }
    }, click: function(e) {
        $("#panel").slideUp("3000");
    }
});
$('#flip, #panel').bind('click', function(e){return false});

Upvotes: 4

Tim Joyce
Tim Joyce

Reputation: 4517

$('#flip').bind('click', function(){
    $(this).toggleClass('contactOpen');
    $("#panel").slideToggle("3000");
});

$('#content').bind('click', function(){
    if($('#flip').hasClass('contactOpen')){
        $(this).toggleClass('contactOpen');
        $("#panel").slideToggle("3000");
    }
});

Upvotes: 0

Calvin Froedge
Calvin Froedge

Reputation: 16373

Why don't you add a class to the body of the page when the panel is opened and remove it when it's closed? That makes this much simpler:

$('.class #content').click(function(){
// Close the contact panel
});

Now, when the body has a class of 'class', any click on the #content div will automatically close contact.

Make sense? Great looking site, by the way.

Upvotes: 1

Related Questions