jQuery – :visible Selector

The jQuery visible selector selects all elements that are visible.

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

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 > :visible").css({border:"3px #1E8CBE solid"});


Following example finds all visible <h4> elements in a div and create a border.

Text 1

Text 2


No comments yet.

Leave a Reply