jQuery

Use jQuery Hidden Selector To Check If Element Is Visible Or Hidden

In jQuery, it’s possible to check if element is visible or hidden. This state of the element can be found out and based upon it, necessary processing can be done. Read on to find out more about this.

How To Check If Element is Visible or Hidden using jQuery

There are 2 visibility states for an element i.e. either Visible or Hidden. Visible means that the element can be seen on the screen. Hidden means that the element still exists but it is hidden from user view and hence cannot be seen on the screen. So now, let’s say that you want to find out if a div with ID “my_div” is hidden or visible. You can do it in the following ways:

//Check if the div is hidden
$("#my_div:hidden")

//Check if the div is visible
$("#my_div:visible")

There is another additional way that you can use to check if the div is visible or not:

$("#my_div").is(":visible")

Note that the above method will checks if the “display” property of the div is none/block. It ignores the “visible” property values, which could be either true or false.

Simple, isn’t it?

Do you know of any other ways to check if element is visible or hidden using hidden() method in jQuery? Feel free to share by commenting below.

Share your thoughts, comment below now!

*

*