title: Problems detecting whether div is hidden or visible
body: <p>I wrote a small list menu that is shown when the user clicks on a button and it will hide if he clicks anywhere outside of the menu. However if he clicks on the button again nothing happens because jQuery doesn't seem to notice the changed visibility.</p>
  
  <p>JS Code:</p>
  
  <pre><code>$(document).on('mouseup', function (e) {
      var container = $('#inbox_menu');
      if (!container.is(e.target)) {
          container.hide();
      }
  });
  $('#inbox_menu_btn').on('click', function (e) {
      if ($('#inbox_menu').is(':hidden')) {
          $('#inbox_menu').show();
      } else {
          $('#inbox_menu').hide();
      }
  });
  $('#inbox_menu li').on('click', function () {
      var type = $(this).data('type');
      $(this).siblings('li').removeClass('active');
      $(this).addClass('active');
      $('#inbox_menu').hide();
  
      // other stuff
  });
  </code></pre>
  
  <p>It appears that <code>if($('#inbox_menu').is(':hidden'))</code> always returns true even if the menu is visible. The same thing happens if I change this line to <code>if($('#inbox_menu').css('display') == 'none')</code></p>
  
  <p>Did I miss something here?</p>
  
  <p><a href="http://jsfiddle.net/om8r2044/" rel="nofollow">JSFiddle</a> for demonstration.</p>