Javatpoint Logo
Javatpoint Logo

jQuery :hidden selector

The :hidden selector in jQuery is used to select the hidden elements. It works upon the hidden elements. The selector will select the hidden elements that satisfy any of the below condition -

  • Form elements with type = "hidden".
  • Elements whose width and height are set to 0.
  • Element with display : none.
  • A hidden parent element that is hiding the child element as well.

An element is not assumed to be hidden if it or any of its parents consumes space in hiding. The element or its parents that do not consume space on hiding are assumed to be hidden elements. So, elements using the CSS properties visibility : hidden and opacity : 0, are considered to be visible as they consume space on hiding. The :hidden selector does not work upon the elements using the CSS property such as visibility : hidden and opacity : 0.

Syntax

The commonly used syntax of using the :hidden selector is given as follows -

The selector is used without any argument. However, we have to use the id, class or tag name before the selector to select the specific element.

Now, let's see some of the illustrations to understand the working of the :hidden selector.

Example1

In this example, we are using the :hidden selector to select the h1 heading element, which is hidden using the display:none CSS property. On clicking the given button, the element will be selected.

Test it Now

Output

After the execution of the above code, the output will be -

jQuery :hidden selector

After clicking the given button, the output will be -

jQuery :hidden selector

Example2

In this example, there are some hidden div elements and some hidden input fields. The :hidden selector will select the hidden div elements and input fields. On clicking the given button, an alert box will display the values of the input fields, and the hidden div elements will also be displayed.

Test it Now

Output

After the execution of the above code, the output will be -

jQuery :hidden selector

On clicking the button in the above screenshot, the values of the input field and div elements will be displayed.






Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA