title: jQuery "show/hide div on click" and "click outside to hide" not working together
body: <p>// I searched but no luck, so I start a new question :)</p>
  
  <p>I have:</p>
  
  <p><code>&lt;a class="icon hide-text" id="btnNoti5" href="#"&gt;Notification&lt;/a&gt;</code></p>
  
  <p>I want that: When I click on this <code>a</code>, it will show/hide a div and when I click outside that div, if it is visible, it hides.</p>
  
  <p>I use this code to show/hide. It works fine:</p>
  
  <pre><code>var divNotifi = $('#divNotifi');
  $('#btnNoti5').click(function(e) 
  {
      if (divNotifi.is(":visible"))
      {           
          divNotifi.hide();
      }
      else 
      {         
          divNotifi.show();
      }
  }
  </code></pre>
  
  <p>But when I add this code to hide the div when user click outside, it actually works, but above code stopped working: First click, it show the div. Second click: Nothing happens. The div wasn't hidden as expected.</p>
  
  <pre><code>$(document).mouseup(function (e)
  {
      var container = $("#divNotifi");
      if (container.has(e.target).length == 0)
      {
          container.hide();
      }
  });
  </code></pre>
  
  <p>Please help me. Thank you very much.</p>