jquery - jQuery toggle hide on click elsewhere

Question

This may be a very simple but never used this type of things so no idea how to do.

I am using fadeToggle to show hide div an

$('#account-toggle').click(     
function(){
    $('#account-toggle').toggleClass('account-active');
    $('.account-group').fadeToggle('fast');
});

It is working fine.. (obviously nothing complex :P ) now what I want is to hide it when user click elsewhere on the screen.

Can anyone help me to make it happen?... thanks a lot

Answer 1

Try this:

$('#account-toggle').click(function(e){
    e.stopPropagation();
    $(this).toggleClass('account-active');
    $('.account-group').fadeToggle('fast');
});

$(document).click(function(){
    $('#account-toggle.account-active').removeClass('account-active');
    $('.account-group:visible').hide();
});

• $(document).click event is triggered whenever a user click anywhere in the page.
• It might happen that the user clicks on the account-toggle element. This will trigger both the #account-toggle & document event due to event bubbling. To stop that we have used the e.stopPropagation() function here.