How to Check if element visibility is hidden or not in jQuery

In this tutorial, we will discuss How to Check if an element is hidden or not in jQuery.

Check if an element is hidden or not in jQuery

Let’s see an Example

To hide any HTML element we need to set its CSS property visibility to “hidden”. So to find element is hidden or not we need to check it’s visibility property.

<h1 id="Heading" style="visibility: hidden;">Hello world</h1>

Here, we set the visibility of the HTML h1 tag element to hidden using the CSS visibility property.

Now using the if condition we check the visibility is equal to hidden or not. According to the condition, we print output in the console.

if( $("#Heading").css('visibility') == 'hidden' ){
    console.log("Element is hidden");
} else {
    console.log("Element is Not hidden");
}

Output:

Element is hidden

Leave a Reply

Your email address will not be published.