How to check if an element is visible with jQuery

January 4, 2021 admin

In this tutorial, we are going to see how to check if an element is visible with jQuery. You can use the jQuery :visible selector to check if an item is visible on the screen or not.

HTML Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Check if an element is visible</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        // Put the jQuery code Here
    </script>
  </head>
  <body>
    <button type="button">Show / hide paragraph</button>
    <p style="display: none;">This is a paragraph.</p>
  </body> 
</html>

[st_adsense]

jQuery Code:

$(document).ready(function() {
    $("button").click(function() {
        $("p").toggle("slow", function() {
            if ($("p").is(":visible")) {
                alert("The paragraph is visible.");
            } else {
                alert("The paragraph is hidden.");
            }
        });
    });
});