jQuery :hidden Selector

What You’ll Learn

The :hidden selector matches elements that consume no layout space — hidden by display:none, zero size, hidden ancestors, or input type="hidden". jQuery extension since 1.0; opposite of :visible.

Introduction

Toggle panels, reveal accordions, audit form fields, and debug UI state — you often need to find elements that are not shown on the page. jQuery’s :hidden pseudo-class selects every element that consumes no space in the document layout.

jQuery has supported :hidden since version 1.0. Official documentation lists several reasons an element is hidden: CSS display:none, type="hidden" inputs, explicit zero width/height, or a hidden ancestor. Because checking visibility can force layout recalculation, prefer scoping with CSS first, then .filter(":hidden"), or track state with a class when performance matters.

Understanding the :hidden Selector

An element is :hidden when it (or an ancestor) consumes no layout space:

• display: none → matches :hidden.
• input type="hidden" → matches :hidden.
• width: 0; height: 0 (explicit) → matches :hidden.
• Inside a hidden parent → child also matches :hidden.
• visibility: hidden or opacity: 0 → still visible to jQuery (uses space).

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":hidden" )

// typical usage:
$( ":hidden" )
$( "div:hidden" )
$( "input:hidden" )

// official demo pattern:
var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );
$( "div:hidden" ).show( 3000 );

// performance pattern — CSS scope, then filter:
$( "#panel *" ).filter( ":hidden" )

Parameters

• None — :hidden takes no arguments. jQuery evaluates layout and ancestry.

Return value

• A jQuery object containing every matched hidden element in document order.
• Empty collection when nothing in scope is hidden.

Official jQuery API example

var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );
$( "span" ).first().text( "Found " + hiddenElements.length + " hidden elements total." );
$( "div:hidden" ).show( 3000 );
$( "span" ).last().text( "Found " + $( "input:hidden" ).length + " hidden inputs." );

Examples Gallery

Example 1 follows the official jQuery hidden demo. Examples 2–5 cover visibility vs display, scoped .filter(":hidden"), hidden inputs, and revealing panels with .show().

var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );
$( "span" ).first().text( "Found " + hiddenElements.length + " hidden elements total." );
$( "div:hidden" ).show( 3000 );
$( "span" ).last().text( "Found " + $( "input:hidden" ).length + " hidden inputs." );

Span shows total hidden elements (excluding script)
Hidden purple divs fade in over 3 seconds
Second span reports hidden input count

console.log( "display:none →", $( "#gone" ).is( ":hidden" ) );
console.log( "visibility:hidden →", $( "#invisible" ).is( ":hidden" ) );
console.log( "opacity:0 →", $( "#transparent" ).is( ":hidden" ) );

display:none → true
visibility:hidden → false
opacity:0 → false

var count = $( "#panel *" ).filter( ":hidden" ).length;
$( "#report" ).text( "Hidden inside #panel: " + count );

#report shows count of hidden nodes inside #panel only
Hidden elements outside #panel are ignored

$( "input:hidden" ).each(function () {
  console.log( this.name + " = " + this.value );
});

csrf = abc123
userId = 42

$( "#reveal-btn" ).on( "click", function () {
  $( "#accordion div:hidden" ).slideDown( 400 );
});

Click "Show all" → hidden accordion panels slide down
Visible panel stays open

🚀 Common Use Cases

• Debug UI — count hidden nodes with $("body").find(":hidden").not("script").
• Reveal panels — $("div:hidden").show() as in the official demo.
• Forms — iterate input:hidden tokens and IDs.
• Accordions — open closed sections with div:hidden + .slideDown().
• Validation — ensure required visible fields are not inside hidden parents.
• Performance — scope then .filter(":hidden") instead of global scans.

📝 Notes

• Available since jQuery 1.0 — jQuery extension, not native CSS.
• Opposite of :visible — partitions the DOM into two sets.
• visibility:hidden and opacity:0 are not :hidden.
• Hidden ancestors hide descendants — children also match :hidden.
• Official demo excludes script from body hidden counts in some browsers.
• Heavy use can hurt performance — prefer classes or scoped .filter().
• jQuery 3+: elements without layout boxes (e.g. empty inline, br) are :hidden.

💡 Best Practices