jQuery : is hidden & visibility

14 May 2014

Recently I noticed that the jQuery(':hidden') won’t work on an element with visibility:hidden. In order to test this I created a simple jsbin for it. It has 3 div’s one with visibility:hidden, other with display:none and last with opacity:0. The jQuery(':hidden') return true only for the element with display:none.

<div style="visibility:hidden" id="hidden"></div>
<div style="display:none" id="display-none"></div>
<div style="opacity:0" id="opacity"></div>

<script>
(function(){
  $('#hidden').is(':hidden') // return false
  $('#display-none').is(':hidden') // return true
  $('#opacity').is(':hidden'); // return false
})()
</script>

The jQuery api doc explains this well

Elements can be considered hidden for several reasons:

  • They have a CSS display value of none.
  • They are form elements with type=”hidden”.
  • Their width and height are explicitly set to 0.
  • An ancestor element is hidden, so the element is not shown on the page.

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout.

If you are confused on “consume space”, you can read my post CSS : Visibility, Opacity and Display which explains the difference between visibility, opacity and display.

If you particularly enjoy my work, I appreciate donations given with Gittip.