jQuery :hidden Selector

Quiz

The :hidden selector is used to select all elements that are currently hidden.

Following are the scenarios where elements are considered as hidden:

Elements with display: none; CSS property.
Elements with visibility: hidden;.
Elements with width or height set to 0.
Form elements with type="hidden".
Elements inside hidden parent elements.

Syntax

Following is the syntax of :hidden selector in jQuery −

$(":hidden")

Parameters

The :hidden specifies the elements to be checked for hidden status.

Example

In the following example, we are demonstrating the basic usage of jQuery :hidden selector −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("div:hidden").show(2000);
        });
    </script>
</head>
<body>
    <div>This div is visible.</div>
    <div style="display:none;">This div is hidden using display: none.</div>
</body>
</html>

After executing the above program, the hidden element will be displayed on the DOM after 2 seconds.

jquery_ref_selectors.htm

Print Page