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.

Related Articles

Comments 0