jQuery Check if element is hidden
Using jQuery there are many ways to check if a HTML Element is hidden or not. In this tutorial, we shall look into some of the ways with examples.
To check if an element is hidden in jQuery, there are two ways :- Use jQuery Selector on the element and :hidden value.
if( $( "element:hidden" ).length ){}
- Get the CSS display attribute of the element and check if it is 'none'.
if( $(" element ").css("display") == "none" ){}
Examples - jQuery Check if element is hidden
Following examples help you understand the usage of jQuery Check if element is hidden :
- Check if HTML Element is hidden
- Check if HTML Element or any of its ancestors are hidden
- Using CSS display attribute, check if element is hidden
Example - Check if HTML Element is hidden
In the following example, paragraph with id="pa" has display style attribute set to none. We shall check if the element is hidden using jquery.
<html>Try Online
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
if($("p#pa:hidden").length){
alert("The element is hidden");
}
});
</script>
</head>
<body>
<div style="display:visible;">
<p id="pa" style="display:none;">A paragraph.</p>
</div>
<p id="pb">Another paragraph.</p>
</body>
</html>
Example - Check if HTML Element or any of its ancestors are hidden
In the following example, paragraph with id="pa" has display style attribute set to block. But its parent (DIV) is hidden. We shall check if the element is hidden using jquery.
<!DOCTYPE html>Try Online
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
if($("p#pa:hidden").length){
alert("The element is hidden");
}
});
</script>
</head>
<body>
<div style="display:none;">
<p id="pa">A paragraph.</p>
</div>
<p id="pb">Another paragraph.</p>
</body>
</html>
Example - Using CSS display attribute, check if element is hidden
In the following example, we use CSS display attribute value. If the value is 'none', then the element is hidden.
<!DOCTYPE html>Try Online
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
if($( "p#pa" ).css("display") == "none"){
alert("The element is hidden");
}
});
</script>
</head>
<body>
<p id="pa" style="display:none;">A paragraph.</p>
<p id="pb">Another paragraph.</p>
</body>
</html>
Conclusion
In this jQuery Tutorial, we have learnt jQuery Check if element is hidden() with the help of examples.