jQuery :hidden Selector

What Is :hidden?

:hidden (since jQuery 1.0) selects elements that are hidden — they consume no space in the layout. Opposite of :visible.

$(":hidden")                    // all hidden elements
$("div:hidden")                 // hidden divs only
$("input:hidden")               // hidden inputs (type=hidden, etc.)
$("#panel *").filter(":hidden") // faster scoped pattern

// Counts as hidden:
// · display: none
// · input type="hidden"
// · width/height set to 0
// · a hidden ancestor
//
// NOT hidden (still take space):
// · visibility: hidden
// · opacity: 0

How to Use :hidden

Find elements that take no space, then count, reveal, or read their values.

1. Call $("div:hidden") or scope with $("#panel *").filter(":hidden").
2. jQuery checks layout space (not only CSS “looks invisible”).
3. Chain .show(), .each(), or read attributes as needed.
4. Exclude noise with .not("script") when scanning body.
5. Remember: during a hide animation, the element stays :visible until the end.

Pseudocode

call $(":hidden")   // or $("type:hidden") / .filter(":hidden")

for each candidate element:
    if it consumes no layout space
       (display:none, type=hidden, 0×0, or hidden ancestor):
        include it
    else if visibility:hidden or opacity:0 only:
        skip it  // still "visible" to jQuery

return the jQuery set

Cheat Sheet

Keep these rules next to :visible.

Live Preview

Toggle panels, then Run to see which ones match :hidden.

Ready — click Prep sample, then Run.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

var hiddenElements = $("body").find(":hidden").not("script");
$("#log").text("Found " + hiddenElements.length + " hidden elements.");
$("div:hidden").show();
$("#inputs").text("Hidden inputs: " + $("input:hidden").length);

Found N hidden elements.
Hidden divs become visible
Hidden inputs: 2

$("#gone").hide();
$("#invisible").css("visibility", "hidden");
$("#transparent").css("opacity", 0);

$("#log").text(
  "display:none → " + $("#gone").is(":hidden") + "\n" +
  "visibility:hidden → " + $("#invisible").is(":hidden") + "\n" +
  "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);

Hidden inside #panel: 2
(outside hidden nodes are ignored)

var lines = [];
$("input:hidden").each(function () {
  lines.push(this.name + " = " + this.value);
});
$("#log").text(lines.join("\n"));

csrf = abc123
userId = 42

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

Click Show all
→ previously hidden sections appear
→ already-visible section stays as-is

Performance Notes

Official docs warn that heavy :hidden use may force reflow. Prefer a class you control, or a CSS select plus .filter(":hidden").

Key Takeaways