Golang React JS Technology Blog

jQuery check if an element is visible or hidden

Use Visibility Filter Selector 
<script>
   $(document).ready(function() {
       var isVisible = $('#visibleElement').is(':visible'); // True
       var isHidden = $('#hiddenElement').is(':hidden'); // True
   });
</script>
Complete Example 
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        #hiddenElement {
            display: none;
        }
        
        #visibleElement {
            display: block;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script>
        $(document).ready(function() {
            var isVisible = $('#visibleElement').is(':visible'); // True
            var isHidden = $('#hiddenElement').is(':hidden'); // True
        });
    </script>
</head>

<body>
    <div id="hiddenElement">
        Test
    </div>
    <div id="visibleElement">
        Test
    </div>
</body>

</html>
Most Helpful This Week
How to check if an element or HTML tag exists using JavaScript? Using jQuery add new table row on click JavaScript simple alert on Click JavaScript check if first string contains all characters of second string How to join string with number in JavaScript? Image Rollover Using onMouseOver and onMouseOut