jQuery :visible Selector

What Is :visible?

:visible (since jQuery 1.0) selects elements that consume space in the document. Official docs: they typically have width or height greater than zero. It is the opposite of :hidden.

$("div:visible")                 // visible divs (official style)
$(".panel").filter(":visible")   // faster pattern (official tip)

// Still :visible (consume space):
//   visibility: hidden
//   opacity: 0

// Not :visible:
//   display: none
//   <option> elements (always hidden in jQuery)

// Opposite: :hidden

How to Use :visible

Scope with a CSS selector first, then filter or bind only the visible matches.

1. Start with a tag or class: $("div") or $(".card").
2. Narrow with :visible or .filter(":visible") (preferred).
3. Remember: visibility:hidden and opacity:0 still match.
4. Treat display:none (and detached nodes) as not visible.
5. Re-query after .show() / .hide() if the set must stay current.

Pseudocode

matches = []
for each element in search context:
    if element is in the document
       and element consumes layout space:
        matches.add(element)

return matches

// Official performance tip:
candidates = CSS_query(…)
return candidates.filter(isVisible)

Cheat Sheet

Keep these facts handy while testing visibility.

Live Preview

Toggle panels, then count div:visible vs div:hidden in this mini demo.

div:visible → 2
div:hidden → 1

/* Panel C is hidden */

jQuery Examples

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

$("div:visible").on("click", function () {
  $(this).text($(this).text() + " ✓");
});
$("#showHidden").on("click", function () {
  $("div:hidden").show();
});

Click a visible box → appends " ✓"
Hidden box ignores clicks until shown

function report() {
  $("#out").text(
    "visible: " + $("#boxes div:visible").length + "\\n" +
    "hidden: " + $("#boxes div:hidden").length
  );
}
report();
$("#toggle").on("click", function () {
  $("#c").toggle();
  report();
});

visible: 2
hidden: 1
(After toggle, counts swap for panel C)

$("#ghost").css("opacity", 0);
$("#gone").hide();
console.log("ghost :visible?", $("#ghost").is(":visible"));
console.log("gone :visible?", $("#gone").is(":visible"));

ghost :visible? true
gone :visible? false
(opacity 0 still takes space; display:none does not)

var $open = $(".card").filter(":visible");
$("#out").text("Visible cards: " + $open.length);

Visible cards: 2

function update() {
  $("#out").text($(".panel:visible").length + " panel(s) visible");
}
update();
$(".panel").on("click", function () {
  $(this).hide();
  update();
});
$("#reset").on("click", function () {
  $(".panel").show();
  update();
});

3 panel(s) visible
Click a panel → count decreases
Reset → back to 3

Performance Notes

Official docs: :visible cannot use querySelectorAll, and heavy use may force layout. Prefer CSS scoping plus .filter(":visible"), or track open/closed state with a class.

Key Takeaways