:hidden
JQ 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
displayattribute value is set tonone. - The CSS
heightandwidthattribute values are set to0. - The element is a form element with
typeattribute value set tohidden. - An ancestor element is hidden, ergo also hiding this element.
- All <option> elements 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 Example
Selectors << Top
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();
});
});
Related Tutorials
jQuery Basic Tutorials - Lesson 4 - jQuery Selectors