How to Check an Element is Hidden or Visible using jQuery

Sometimes it needed to check whether a div is visible or hidden before triggering an event. Using jQuery, you can easily detect if a specific element in the web page is hidden or visible. jQuery :visible and :hidden selector is the easiest solution to detect elements visibility.

The example code shows you how to check if an element is visible or hidden using jQuery.

$(document).ready(function(){
    $("button").click(function(){
        // Hide if not hidden
        $('div:visible').hide();
    
        // Show if not visible.  
        $('div:hidden').show();
    });
});

:visible
Elements that consume space in the layout is considered as visible.

:hidden
Elements are considered hidden if:

• CSS display value of none.
• Form elements with type=”hidden”.
• Width and height are set to 0.

You can also check if an element is visible or hidden using jQuery.

// Checks css for display:[none|block]
$(element).is(":visible");

// Checks css for display:[none|block]
$(element).is(":hidden");