jQuery – :hidden Selector

The jQuery hidden selector selects all elements that are hidden.

Elements can be considered hidden for several reasons :

  • They have a CSS display value of none.
  • They are form elements with type=”hidden”.
  • Their width and height are explicitly set to 0.
  • An ancestor element is hidden, so the element is not shown on the page.

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout.

Source Code

<!DOCTYPE html>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
<div class="div1">
<h4 style="display:none;">Text 1</h4>
<h4>Text 2</h4>
<button>Click Here</button>

jQuery("button").click(function () {
	jQuery(".div1 > :hidden").text("Was Hidden!!!").show().css({border:"3px #1E8CBE solid"});


Following example shows all hidden elements (inside <div class=”div1″>) and create a border around them.

Text 1

Text 2


No comments yet.

Leave a Reply