How do I check if an element is hidden in jQuery?


Using jQuery, you can detect if a specific element in the page is hidden or visible with is(:visible). You can try to run the following code to learn how to check if an element is hidden in jQuery or not −

Example

Live Demo

<html>
   <head>
      <title>jQuery Selector</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
         $(document).ready(function() {
         $("#button1").click(function(){

           var visible = $('#myElement').is(':visible');
         
           if(visible) {
              alert("input element is visible");        
           }
           else
           {
              alert("input element is hidden");
           }
         });
        });
         
      </script>
   </head>
   <body>
      <input type="text" id="myElement" style="display:block;"/>
      <button id="button1">Check Visibility</button>
   </body>
</html>

Updated on: 12-Jun-2020

128 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements