Question

I am trying to use slide toggle to show a sign in form and if they click outside of the box, I want that form to slide up.

I have everything running fine however my check for visibility isn’t working and thus clicking outside the form container is not working. Can you spot why?

var loginForm = jQuery("#login .login-form");
jQuery("#login a").click(function(e) {
    e.preventDefault();
    loginForm.slideToggle();

});

// below check isn't working why?
if (jQuery(loginForm).is(":visible")) {
    jQuery("body").click(function() {
        jQuery(loginForm).slideUp();
    });
}

Answer 1

You need the check inside the click handler:

jQuery("body").click(function() {
    if (loginForm.is(":visible")) {
        loginForm.slideUp();
    }
});

An additional note, you don’t need to call jQuery on an object which is already a jQuery object. No need to double wrap your loginForm.

You will want to event.stopPropagation() in your login click handler as well, otherwise clicking on it will bubble up to the body and fire that handler as well.