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

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to check an element is
        visible or not using jQuery?
    </title>
      
    <script src=
    </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>        

chevron_right


Output:

Example 2: This example uses :visible selector to check an element is visible or not using jQuery.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to check an element is
        visible or not using jQuery?
    </title>
  
    <script src=
    </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>        

chevron_right


Output:

  • Before Click on the Button:
  • After Click on the “Click to Display” button:
  • After Click on the “Click to Hide” button:


My Personal Notes arrow_drop_up

Small things always make you to think big

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.