This article describes how to use jQuery to determine whether an element is hidden:

// Determine CSS property display:[none|block], ignore visibility:[true|false]
// Determine whether the element is visible
$(element).is(":visible");

// Determine whether the element is hidden
// The same works with hidden
$(element).is(":hidden");

The following example demonstrates two divs, one visible and one hidden, and uses jQuery to determine whether the div elements are hidden:

Example

<div id="div1" style="display:none">
Div1 element is hidden
</div>

<div id="div2" style="display:block">
Div2 element is visible
</div>
<script>
if($("#div1").is(":visible")) {
document.write("Div1 element is visible<br>");
}

if($("#div1").is(":hidden")) {
document.write("Div1 element is hidden<br>");
}

if($("#div2").is(":visible")) {
document.write("Div2 element is visible<br>");
}

if($("#div2").is(":hidden")) {
document.write("Div2 element is hidden<br>");
}
</script>

Try it »