Skip to content Skip to sidebar Skip to footer
Reading Time: < 1 minute

How to check html element is visible/display or hidden using JQuery.This is very easy job.JQuery is() function can be easily use to this.Look at these examples.Those are perfectly working and responding all browsers.
This is the element.


Here,check that is visible or not.

if( $('#myDiv').is(':visible') ) {
    // Element is visible
}
else {
    // Element is not visible
}

Also you can use this to check visible or not that element.

if( $('#myDiv').css('display') == 'none' ) {
    // Element is not visible
}
else {
   // Element is visible
}

This is the another mothod.

    if ( $('#myDiv').css("visibility") == "hidden" ) {
         // Element is not visible
    }
    else {
         // Element is visible
    }

You can use opposite method to check element is visible or hidden.You can use “hidden” attribute to this.

if( $('#myDiv').is(':hidden') ) {
    // Element is not visible
}
else {
    // Element is visible
}

May be if( $('#myDiv').is(':visible') ) is not working properly.So you can try to following method.

if( $('#myDiv:visible') ) {
    // Element is not visible
}
else {
    // Element is visible
}

Note: All of these are return true or false.