Click outside of div and more

Question

I want login area (in code below) to toggle on login button click. Also, I need login area hidden when clicked anywhere outside of login area, but not on login button.

<button id="loginBtn">Login</button>

<div id="loginArea">
   <!-- here is login form -->
</div>

How can I achieve this?

@eomeroff: You have 1151 rep - surely you should know by now that people will ask you - 'what have you tried so far'... — Paul, Mar 12 '13 at 13:29
@Westie I do not have 1151 any more. And I do not see any one asking what have I tried. What if I do not have a clue how to try. This is specific question that could not research. Honestly I do not see the reason why 5 down votes. Hope the question will be useful for someone. — eomeroff, Mar 12 '13 at 13:42

score 2 · Answer 1 · answered Mar 12 '13 at 13:31

2

Using:

$('body').on('click', '#loginBtn', function(){
    $('#loginArea').show();
});

Will show the login, while the following will remove it when you click outside of it:

$(document).on('click', 'body:not(#loginArea)', function(){
    $('#loginArea').hide();
});

answered Mar 12 '13 at 13:31

Tom Walters

15,366
7
57
74

.remove() will remove the div from the DOM. – Dogoku Mar 12 '13 at 13:32
@Dogoku Ah good catch! Updated. – Tom Walters Mar 12 '13 at 13:33

Matt Cain · Accepted Answer · 2013-03-12T13:36:13.890

1

$(function() {
    $('#loginBtn, #loginArea').on('click', function(e) {
        $('#loginArea').show();
        e.stopPropagation();
    });
    $('body').on('click', function() {
        $('#loginArea').hide();
    });
});

If the click is within the login area or on the button, then the event will not make it to the second handler to hide the login area.

edited Mar 12 '13 at 13:36

answered Mar 12 '13 at 13:30

Matt Cain

5,638
3
36
45

score -1 · Answer 3 · answered Mar 12 '13 at 13:31

-1

How's that?

$('#loginBtn').click(function (e) {
   $('#loginArea').toggle();
   e.stopPropagation();
});

$(document).on('click',function () {
    $('#loginArea').hide();
});

answered Mar 12 '13 at 13:31

Dogoku

4,585
3
24
34

This will hide the login box even when you click inside it. – Tom Walters Mar 12 '13 at 13:32
no it wont, `e.stopPropagation()` stops event bubbling to the other handler – Dogoku Mar 12 '13 at 13:33

Click outside of div and more

3 Answers3