JQUERY: Close a div if user clicks outside of it

Question

I have a hidden div that opens up with a user clicks on the the title (Notifications). The "subpanel" div is hidden by default, but using jquery it will toggle open/close when a user clicks on the word Notifications.

How can I modify my jquery so that if a user clicks outside of the div that is toggled open (subpanel), this would also trigger the subpanel to close/hide ?

<div class="notiftitle" id="notiftitle">
<a href="#" class="alerts">Notifications</a>
 <div class="subpanel">
    <div id="title">New Notifications</div>
    <ul>
      <li>Data</li>
    </ul>
  </div>
</div>

$(document).ready(function(){

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
    $(".alerts").click(function(){
        $(this).toggleClass("notiftitleactive");
        $(this).toggleClass("active").next().slideToggle(50);
        return false; //Prevent the browser jump to the link anchor
    });


});

You may better want to use evt.preventDefault() rather than return false: http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false — Janis Veinbergs, Jul 03 '11 at 12:39

score 2 · Accepted Answer · answered Jul 03 '11 at 12:41

2

It sounds like you need the "outerClick"-event. ouerClick jQuery plugin by Jon Kassen.

answered Jul 03 '11 at 12:41

mqchen

4,195
1
22
21

score 1 · Answer 2 · answered Jul 03 '11 at 12:22

1

You need to use the blur event:

$(".alerts").blur(function(){
    $(this).toggleClass("notiftitleactive");
    $(this).toggleClass("active").next().slideToggle(50);
});

answered Jul 03 '11 at 12:22

JoshB

742
1
8
12

score 0 · Answer 3 · answered Jul 03 '11 at 12:20

0

Try mouseout method.

answered Jul 03 '11 at 12:20

SIFE

5,567
7
32
46

I dont want it to close when the mouse leaves, only if someone clicks away from it – Mark Jul 03 '11 at 12:22

JQUERY: Close a div if user clicks outside of it

3 Answers3