How to check an element is visible or not using jQuery?

11 Sep, 2019
Given a HTML document and the task is to check the element is visible or not using jQuery :visible selector. The :visible selector can be used with .toggle() function to toggle the visibility of an element. It will works with the elements visibility: hidden; or opacity: 0;
Syntax:
$(element).is(":visible");
Example 1: This example uses :visible selector to check an element is visible or not using jQuery.
<!DOCTYPE html><html>  <head>    <title>        How to check an element is        visible or not using jQuery?    </title>          <script src="https://code.jquery.com/jquery-1.12.4.min.js">    </script></head>  <body style="text-align:center;">      <h1 style = "color:green;" >         GeeksForGeeks     </h1>           <h3>        How to check an element is         visible or not using jQuery ?    </h3>          <p style="display: none;">        GEEKSFORGEEKS - A computer science        portal for geeks.    </p>          <input onclick="change()" type="button"        value="Click to Display" id="myButton1">    </input>          <script type="text/javascript">        $(document).ready(function() {            $("input").click(function() {                                  // Display hide paragraph on button click                if (this.value == "Click to Display")                     this.value = "Click to Hide";                else this.value = "Click to Display";                                  $("p").toggle("slow", function() {                                          // Check paragraph once toggle                    // effect is completed                    if($("p").is(":visible")) {                        alert("Paragraph is visible.");                    } else {                        alert("Paragraph is hidden.");                    }                });            });        });    </script></body>  </html>        
Output:
Example 2: This example uses :visible selector to check an element is visible or not using jQuery.
<!DOCTYPE html><html>  <head>    <title>        How to check an element is        visible or not using jQuery?    </title>      <script src="https://code.jquery.com/jquery-1.12.4.min.js">    </script>          <style>         h1 {             color: green;         }         table, th, td {             border: 1px solid black;             text-align: center;        }     </style></head>  <body>    <center>    <h1 style = "color:green;" >         GeeksForGeeks     </h1>           <h3>        How to check an element is         visible or not using jQuery?    </h3>          <input onclick="change()" type="button"        value="Click to Display" id="myButton1">    </input>          <table style="width:70% ">               <tr>             <th>Language Index</th>             <th>Language Name</th>         </tr>         <tr>             <td>1</td>             <td>C</td>         </tr>         <tr>             <td>2</td>             <td>C++</td>         </tr>         <tr>             <td>3</td>             <td>Java</td>         </tr>         <tr>             <td>4</td>             <td>Python</td>         </tr>         <tr>             <td>5</td>             <td>HTML</td>         </tr>     </table>           <h4></h4>          <script type="text/javascript">        $(document).ready(function() {            $("input").click(function() {                                  // Display hide paragraph on                // button click                if (this.value=="Click to Display")                    this.value = "Click to Hide";                else                     this.value = "Click to Display";                                  $("table").toggle("slow", function() {                                          // Check paragraph once toggle                    // effect is completed                    if($("table").is(":visible")) {                        $("h4").text("Paragraph is visible.");                    }                     else {                        $("h4").text("Paragraph is hidden.");                    }                });            });        });    </script>    <center></body>  </html>        
Output:
Before Click on the Button:
After Click on the “Click to Display” button:
After Click on the “Click to Hide” button:
jQuery-Misc
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.