:hiddenS2C Home « Selectors « :hidden
Hidden element selector.
Shorthand version $(':hidden')
Description
The :hidden selector, selects all hidden elements.
- Opposite of the
:visibleselector. - Being a jQuery extension the
:hiddenpseudo selector is not part of any current CSS specification. Therefore:hiddencannot take advantage of the performance boost provided by the native DOMquerySelectorAll()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 examples below to narrow the search and improve performance.
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.
- All<option></option> HTML element are considered hidden, regardless of their selected state
- Elements that are not in a document.
Syntax
| Signature | Description |
|---|---|
jQuery(':hidden') | Hidden element match |
Parameters
None.
Return
N/A.
:hidden ExampleTop
Select all hidden elements.
In the example below hidden 'tr' elements are shown when the button below is pressed.
| 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 |
| Table Row 5, Table Data 1 | Table Row 5, Table Data 2 |
| Table Row 6, Table Data 1 | Table Row 6, Table Data 2 |
$(function(){
$('#btn1').on('click', function() {
$(".testtable tr:hidden").show();
});
});