How do I check if an element is hidden in jQuery?

46    1 year ago

It is possible to toggle the visibility of an element, using the functions .hide().show() or .toggle().

How would you test if an element is visible or hidden?

Answers { 3 }
1 year ago

Since the question refers to a single element, this code might be more suitable:

// Checks css for display:[none|block], ignores visibility:[true|false]

// The same works with hidden

Same as twernt's suggestion, but applied to a single element; and it matches the algorithm recommended in the jQuery FAQ

1 year ago

You can use the hidden selector:

// Matches all elements that are hidden

And the visible selector:

// Matches all elements that are visible

1 year ago

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden

Above method does not consider the visibility of the parent. To consider the parent as well, you should use .is(":hidden") or .is(":visible").

For example,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>