We can simply select all the hidden elements on an HTML page using the hidden selector. Hidden elements are form elements with type="hidden". That is we can select all hidden elements using the :hidden selector in jQuery. Elements not included in a document are not considered to be visible, jQuery has no way of knowing if they will be visible because it depends on there styles. Hidden or opacity: 0 is considered as visible since they still consume layout space. The hidden selector is the opposite of the visible selector. Therefore, not every item selected by hidden is selected by :visible and vice versa.if the element is hidden so that element is not shown on the page.

Syntax  $(":hidden")

Example  $("p:hidden").show();

Source code


	<!doctype html>
	<html lang="en">
	<head>
	  <meta charset="utf-8">
	  <title>hidden demo</title>
	  <style>
	  div {
	    width: 70px;
	    height: 40px;
	    background: #00ff00;
	    margin: 5px;
	    float: left;
	  }
	  span {
	    display: block;
	    clear: left;
	    color: red;
	  }
	  .starthidden {
	    display: none;
	  }
	  </style>
	  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
	</head>
	<body>
	 
	<span></span>
	<div></div>

	<div style="display:none;">Hidden</div>
	<div></div>
	 
	<div class="starthidden">Hidden</div>


	<span></span>
 
<script>
// In some browsers :hidden includes head, title, script, etc...
var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );
 
$( "span" ).first().text( "Found " + hiddenElements.length + " hidden elements total." );
$( "div:hidden" ).show( 3000 );
</script>
 
</body>
</html>