How To Trigger Panel Close from click outside the Panel

Question

I just installed a slideDown panel from the "FAST QUOTE" button on the top of the page:

link text

Is it possible to make the panel slideUp when the user clicks anywhere outside of the slideDown panel? Below the Panel?

Answer 1

It seems you are using jQuery (Saw from jQuerify (Firebug)). So you need to trigger the close button click when you click in the outside area.

Assuming the slide events are on .closeQ, specify your outsidearea and bind the click event to trigger the close button.

$("outsidearea").click(function(){ $(".closeQ").trigger("click"); });

Answering your comment:

On your slide down/up method add this code (at the first line (close first, open after))

$(".btn-slide.closeQ, .btn-slide2.closeQ").trigger("click");

It will find if the panel is open, and if it is opened it will trigger the event to close.

Answer 2

What you can do is bind a click event to the document that will hide the panel if something outside the panel is clicked, but won't hide it if something inside the panel is clicked, so your "show" event (or slidedown or whatever shows the panel)

    $('.form_wrapper').show(function(){

        $(document).bind('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.parents().hasClass(".class-of-panel")) {
                 $('.form_wrapper').hide();
            }
        });

    });

Then when hiding it, unbind the click event

$(document).unbind('click');