How to check if an element is visible with jQuery

admin January 4, 2021October 10, 2021 0 Comments jquery check if element is visible on screen

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>

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.");
            }
        });
    });
});