Selector hidden

The :hidden selector selects all elements on the page that are hidden. Elements with visibility: hidden or with opacity: 0 are considered visible because they take up space in the layout. Elements can be considered invisible for several reasons: the value of the display CSS property is none, or they are elements with the type="hidden" attribute, or their height or width is set to 0, or their parent element is hidden. Since :hidden is not part of the CSS specification, for better performance in modern browsers it is better to first filter elements using a pure CSS selector and then apply .filter(':hidden'). Tracking element visibility using other methods, such as a class, may provide better performance.

Syntax

This is how we select hidden elements:

javascript$(':hidden');

Example

Let's show the invisible squares by clicking on the button #test:

html<button id="test">show</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>

cssdiv {
  width: 40px;
  height: 40px;
  margin: 5px;
  border: 2px outset green;
  float: left;
}

javascript$('#test').click(function() {
  $('div:hidden').show('slow');
});

See also