The below code snippet explains how to find whether element is hidden or visible i.e. its CSS is set to display = none or display = block respectively using jQuery
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#demo").live("click", function () {
CheckElementVisibility("dvA");
CheckElementVisibility("dvB");
});
function CheckElementVisibility(id) {
if ($("#" + id).is(":hidden")) {
alert(id + " is hidden.");
} else {
alert(id + " is visible.");
}
}
</script>
<div id = "dvA">A</div>
<div id = "dvB" style = "display:none">B</div>
<input type = "button" id = "demo" value = "Demo" />
Explanation:
In the above code snippet there are 2 DIV controls of which one (dvA) is visible while the other (dvB) has its CSS style set to display:none. Also we have a button with ID demo to which we have bind jQuery click event handler. When the demo button is clicked the CheckElementVisibility function is called which finds whether the element is hidden or visible using the jQuery is(":hidden") function which returns true if the element or control is hidden.