jquery/javascript: hide div when click anywhere on page except for selected div?

Question

i have div-1 and div-2. when a user clicks on div-1 div-2 is shown. This operates using jquery as a toggle function so when a user re-clicks div-1, then div 2 is hidden again. now i want to add a statement to my jquery that says if the user clicks to another area of the page so an area which is not div-1 then to also hide div-2. can someone please show me how i might do this as i am brand new to jquery and javascript.

thanks

<script type="text/javascript"> 
$('.notifications').click(function() {
       $('.drop_down_column2').toggle();
       return false;
   });
   </script>

possible duplicate of [How to detect a click outside an element?](http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element) — Eric Hotinger, Oct 16 '13 at 21:59

score 0 · Answer 1 · answered Oct 16 '13 at 22:00

It's pretty straightforward:

$('body').click(function() {
    $('.drop_down_column2').hide();
});

Because you are returning false from your .notifications click handler, jQuery will prevent propagation of the event up to the body. So in essence, any time you click anywhere, except .notifications, your div will hide.

jquery/javascript: hide div when click anywhere on page except for selected div?

1 Answers1