3 Ways to Check If Element is Visible or Hidden using jQuery

Written by Ubaidullah| May 27, 2017| JS

Do you want to test whether an element is visible or hidden using jQuery? Here, you’ll learn three approaches to finding out if an element is visible or hidden with jQuery.

Table of Contents: Check if Element is Visible using jQuery

Using jQuery’s .is() (Best Approach)
Using jQuery’s .css() for display:none
Using jQuery’s .css() for visibility:visible or visibility:hidden
Video Tutorial & Demo

Using jQuery’s .is()

HTML

<p class="wpp" style="display:none;">A test from inthiscode’s team</p>

1	<p class="wpp" style="display:none;">A test from inthiscode’s team</p>

jQuery

$(document).ready(function() {
	if($('.wpp’).is(":visible")) {
		alert("The paragraph with class 'wpp' is visible");
	} else {
		alert("The paragraph with class 'wpp' is hidden");
	}
});

$(document).ready(function() {

if($('.wpp’).is(":visible")) {

alert("The paragraph with class 'wpp' is visible");

} else {

alert("The paragraph with class 'wpp' is hidden");

}

});

Using jQuery’s .css() for display:none

HTML

<p class="wpp" style="display:none;">A test from inthiscode’s team</p>

1	<p class="wpp" style="display:none;">A test from inthiscode’s team</p>

jQuery

$(document).ready(function() {
	if ( $('.wpp’).css('display') == 'none' ){
		alert("The paragraph with class 'wpp' is hidden");
	} else {
		alert("The paragraph with class 'wpp' is visible");
	}
});

$(document).ready(function() {

if ( $('.wpp’).css('display') == 'none' ){

alert("The paragraph with class 'wpp' is hidden");

} else {

alert("The paragraph with class 'wpp' is visible");

}

});

Using jQuery’s .css() for visibility:visible or visibility:hidden

HTML

<p class="wpp" style="visibility:visible;">A test from inthiscode’s team</p>

1	<p class="wpp" style="visibility:visible;">A test from inthiscode’s team</p>

jQuery

$(document).ready(function() {
	if ( $('.wpp').css('visibility') == 'hidden' ){
		alert("The paragraph with class 'wpp' is hidden");
	} else {
		alert("The paragraph with class 'wpp' is visible");
	}
});