Hidden (:hidden)
In this chapter you will learn:
- Description and Syntax for jQuery hidden selector
- Examples for hidden selector
- How to show hidden elements
Description and Syntax
$(':hidden')
selects all elements that are hidden.
Examples
$('li:hidden')
selects all<li>
elements that are hidden$('.myclass:hidden')
selects all elements with the classmyclass
that are hidden
The following code selects the hidden div tags.
<html><!--from ja v a 2 s . com-->
<head>
<style>
.test{ border: 1px solid red; }
</style>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div:hidden").show(3000);
});
</script>
</head>
<body>
<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>
<div class="starthidden">Hider!</div>
<div></div>
<form>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
</form>
<span></span>
</body>
</html>
Show hidden elements
The following selects all hidden divs and then shows them with show method.
<html><!-- ja va2 s . c om-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($(":hidden").length);
$(":hidden").show(3000);
});
</script>
</head>
<body>
<body>
<input type="button" value="Input Button"/>
<input type="checkbox">java2s.com</input>
<input type="hidden" />
<select><option>Option<option/></select>
<textarea></textarea>
<button>Button</button>
</body>
</html>
Next chapter...
What you will learn in the next chapter: