:hiddenS2C Home « Selectors « :hidden

Hidden element selector.

Shorthand version $(':hidden')


The :hidden selector, selects all hidden elements.

An element is considered 'hidden' if any of the following apply:

  • The CSS display attribute value is set to none.
  • The CSS height and width attribute values are set to 0.
  • The element is a <form></form> HTML element with type attribute value set to hidden.
  • An ancestor element is hidden, ergo also hiding this element.

Opposite of the :visible selector.

Being a jQuery extension the :hidden pseudo selector is not part of any current CSS specification. Therefore :hidden cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.

If this selector is not preceded by another selector, the universal selector ("*") is implied and so the whole DOM will be searched. Use another selector as in the example below to narrow the search and improve performance.


Signature Description
jQuery(':hidden')Hidden element match





:hidden ExampleTop

Select all hidden elements.

In the example below hidden 'tr' elements are shown when the button below is pressed.

Table For Testing Hidden/Visible Selectors
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2

  $('#btn24').on('click', function() {
    $(".testtable tr:hidden").show();

Press the button below to show hidden table rows above: