Unable to hide a certain div when click outside of it

Question

I'v searching for a way to hide a toggling div which is already hidden by default. I want to hide the div if user click outside of it!

I tried this:

<script> 
  $(document).ready(function(){ 
     $("#tab").hide();
     $("#open_tab").on("click",function(){
        $("#tab").toggle();    
        $("*").on("mouseup",function(e){
              var clicked=$(this).attr("id");
              if(clicked !="tab"){
                 e.stopPropagation();
                 $("#tab").hide();
              }
             else {
                   e.stopPropagation();
             }
        });
     });
}); </script>

But i don't know what's wrong with my code. Please can anyone help?

your code worked when I tried it in [jsfiddle](http://jsfiddle.net/7mNyS/2/) — Joe, Jul 02 '13 at 18:59

score 0 · Answer 1 · answered Jul 02 '13 at 18:56

The toggle() jQuery function:

Display or hide the matched elements. (documentation)

So, you don't need any mouseup event. Just use toggle() function on click for #open_tab.

HTML

<div id="open_tab">Click</div>
<div id="tab">TOGGLE</div>

Javascript

$("#tab").hide();
$("#open_tab").on("click", function () {
    $("#tab").toggle();
});

JSFIDDLE

vee · Answer 2 · 2013-07-02T21:11:47.083

Your mouseup event gets registered only on click event on open_tab. You should move this block outside of $("#open_tab").on("click",function(). Please try the following:

<script> 
  $(document).ready(function(){ 
     $("#tab").hide();
     $("#open_tab").on("click",function(){
        $("#tab").toggle();    
     });

     $("*").on("mouseup",function(e){
          var clicked=$(this).attr("id");
          if(clicked !="tab"){
              e.stopPropagation();
              $("#tab").hide();
          } else {
              e.stopPropagation();
          }
     });
}); 
</script>

Update: Here is a shorter version for you:

<script>
    $("#tab").hide();
    $(document).on('click', function (evt) {
        if (evt.target.id == 'open_tab') {
            $('#tab').toggle();
        } else if (evt.target.id != 'tab') {
            $('#tab').hide();
        }
    });
</script>

I did it that way to only trigger when `#open_tab` is click so it would'nt affect other `click` events. Is there any way to do this only when `#opent_tab` is clicked? — Stanley Amos, Jul 02 '13 at 19:16

Unable to hide a certain div when click outside of it

2 Answers2

HTML

Javascript