Image

jQuery-Check if an element is hidden or Not?

:visible and :hidden selector can be used to determine if element is hidden or visible.
This selector will also select the elements with visibility: hidden; or opacity: 0;, because they preserve space in the layout even they are not visible in open.
These selector return true or false based on the used because jQuery is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which 
satisfies the passed parameter. It will return true if there is a match otherwise returns false.


  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  
  5. </head>  
  6. <body>  
  7. <p>Para Visiable</p>  
  8. <script>  
  9.     $(document).ready(function(){  
  10.       // show hide paragraph on button click  
  11.       if($("p").is(":visible")){  
  12.         alert("The paragraph  is visible.");  
  13.       }  
  14.       if($("div").is(":hidden")){  
  15.         alert("Div is hidden.");  
  16.       }  
  17.     });  
  18. </script>  
  19. </body>  
  20. </html>  


Elements that are not in a document are considered hidden; jQuery does not have a way to know if they will be visible when appended to a document since it depends on the applicable styles.

Categories: Java Script Tags: #JQuery, #JavaScript,

Newsletter Subcribe

Receive updates and latest news direct from our team. Simply enter your email.