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

avatar
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 }
avatar
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]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden"); 

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

avatar
1 year ago

You can use the hidden selector:

// Matches all elements that are hidden
$('element:hidden')

And the visible selector:

// Matches all elements that are visible
$('element:visible')

avatar
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>
</div>