There are many ways to check if an element is hidden using jQuery. I will list out mostly used methods in this post.
Let’s say the element has id=”test”. Then the code will be,
Method 1:
|
1 |
$('#test').is(':hidden') |
Working example for the above method is here:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(function(){ if($('#test').is(':hidden')){ alert('yes hidden'); } }); </script> </head> <body> <div class="container"> <div class="row"> <div id="test" style="display:none">Test DIV</div> </div> </div> </body> </html> |
Above snippet will see for the element is hidden or not, if hidden it gives an alert saying ‘yes hidden’.
Method 2:
The second method is basically checking the CSS propery display is none or block.
|
1 |
$('#test').css('display') == 'none' |
Working example for the method 2 is here:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(function(){ if($('#test').css('display') == 'none'){ alert('yes hidden'); } }); </script> </head> <body> <div class="container"> <div class="row"> <div id="test" style="display:none">Test DIV</div> </div> </div> </body> </html> |
Same like the above method this example also gives an alert ‘yes hidden’ if the display is none.
I hope this could have helped you.
