Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    </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=
    </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:


Last Updated : 11 Sep, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads