Check an Element is Hidden or Visible Using jQuery

In this tutorial I am going to share simple jQuery snippet to check whether an html element hidden or visible on page. Sometimes require to check whether a div or any other html element is visible or hidden before triggering an event. Using jQuery .is function, you can easily detect if a specific element in on page is hidden or visible.



Use following jQuery code to detect an element is hidden or visible.

$(document).ready(function(){
        // Checks css for display:[none|block], ignores visibility:[true|false]
        $("div").is(":visible"); // return true or false
    
        // Elements are considered hidden if: CSS display value of none. or Form elements with type=”hidden”. or Width and height are set to 0. 
        $("p").is(":hidden"); return true or false
});