checking if a HTML element is visible or hidden under JQuery

Mon Jan 07, 2013 7:37 pm

For checking if a HTML element is visible or hidden under JQuery , for CSS display property :

css code

<style type="text/css">
div.nonVisib{
display:none;
}
</style>
<div class="nonVisib"> Your content Here </div>

To check if this element is hidden or visible :

javascript code

if( $('div.nonVisib').is(':visible') ) {
    // in case the element is visible 
}
else {
    //  in case the element is hidden 
}

You can swap the conditions as this
javascript code

if( $('div.nonVisib').is(':hidden') ) {
    // in case the element is hidden 
}
else {
    //  in case the element is visible
}