How to check if an element is hidden in jQuery?

Web Development
,
1

I am trying to write some functionality based on some elements’ visibility. Is there a way to check if an element is visible or hidden using jQuery?

2

To check if an element is hidden in jQuery, you can use the :hidden selector and is() method.

if( $(element).is(":visible") ){
    // element is visible
}
if( $(element).is(":hidden") ){
    // element is hidden
}

Note: This will only work on the CSS display:[none|block] property and not on the visibility:[true|false] property.

Alternatively, you can try the solution below.

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

Note: This method will not check whether the parent element is visible.