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.

<!DOCTYPE html>
<html>

<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("h1:hidden").show();
});
});
</script>
</head>

<body>
<h1 style = "display:none;"> Welcome to the javaTpoint.com </h1>
<p> It is an example of using the <b> :hidden </b> selector. </p>
<p> Click the below button to see the effect. </p>
<button id = "btn"> Click me </button>
</body>

</html>

Test it Now

Output

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

After clicking the given button, the output will be -

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.

<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 50px;
width: 50px;
margin: 5px;
text-align: center;
background: lightblue;
border: 2px solid black;
float: left;
}
.hide {
display: none;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
</head>

<body>
<h1> Welcome to the javaTpoint.com </h1>
<p> It is an example of using the <b> :hidden </b> selector. </p>
<p> Click the below button to see the effect. </p>
<button> Click me </button>
<br><br>
<div class = "hide"> div 1 </div>
<div class = "hide"> div 2 </div>
<div class = "hide"> div 3 </div>
<div class = "hide"> div 4 </div>
<input type = "hidden" value = "Name">
<input type = "hidden" value = "Email">
<input type = "hidden" value = "Mobile no.">
<script>
$(document).ready(function() {
$("button").click(function() {
$("div:hidden").show();
$( "input:hidden" ).each(function(){
var value = $(this).val();
alert(value);
});
});
});
</script>

</body>

</html>

Test it Now

Output

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