I have a basic JQuery script that changes a few divs when you click - thus showing them - via toggle.

<script type="text/javascript">
     $('#content_display').click(function() {
         $(this).toggleClass('selected');
         $('#content_display_selector_container').toggle();
     });
</script>

However - to call the even you need to click only on the first main div with the ID of "content_display".

My question is this: how can I hide these changes using JQuery if the user also clicks on BODY - i.e. if you click away, the divs go back to their original hidden state?

Thanks for helping a JQuery clutz!

I have a basic JQuery script that changes a few divs when you click - thus showing them - via toggle.

<script type="text/javascript">
     $('#content_display').click(function() {
         $(this).toggleClass('selected');
         $('#content_display_selector_container').toggle();
     });
</script>

However - to call the even you need to click only on the first main div with the ID of "content_display".

My question is this: how can I hide these changes using JQuery if the user also clicks on BODY - i.e. if you click away, the divs go back to their original hidden state?

Thanks for helping a JQuery clutz!

• javascript
• jquery

• Bind a click handler to the document or body element. – Felix Kling Commented May 23, 2011 at 12:16

2 Answers 2

Something like this should work:

$('body').click(function(e) {
    if (!$(e.target).is('#content_display')) {
        $('#content_display').removeClass('selected');
        $('content_display_selector_container').hide();
    }
});

Hey - found a way to do this - does anyone think there's a better way?

Here's the result:

<script type="text/javascript">
   var mousetrap = false;
   $('body').click(function() {
       if (mousetrap == false) {
          $('#content_display').removeClass('selected');
          $('#content_display_selector_container').hide();
        }
   });
   $('#content_display').hover(function() {
         mousetrap = true;
   },function(){
         mousetrap = false;
});
     $('#content_display').click(function() {
           $(this).toggleClass('selected');
           $('#content_display_selector_container').toggle();
     });
</script>