How do I check if an element is hidden in jQuery?

It is possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle().

.hide()

.show()

.toggle()

How would you test if an element is visible or hidden?

$(element).is(":visible")

51 Answers
51

Since the question refers to a single element, this code might be more suitable:

// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");


Same as twernt's suggestion, but applied to a single element; and it matches the algorithm recommended in the jQuery FAQ

visible=false

display:none

display:none

display:none

visible=true

:visible

display

show()

hide()

display

You can use the hidden selector:

hidden

// Matches all elements that are hidden
$('element:hidden')


And the visible selector:

visible

// Matches all elements that are visible
$('element:visible')


type="hidden"

display: none

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden")
// element is hidden



Above method does not consider the visibility of the parent. To consider the parent as well, you should use .is(":hidden") or .is(":visible").

.is(":hidden")

.is(":visible")

For example,

<div id="div1" style="display:none">
<div id="div2" style="display:block">Div2</div>
</div>


The above method will consider div2 visible while :visible not. But the above might be useful in many cases, especially when you need to find if there is any error divs visible in the hidden parent because in such conditions :visible will not work.

div2

:visible

:visible

hide()

show()

toggle()

:visible

:hidden

None of these answers address what I understand to be the question, which is what I was searching for, "How do I handle items that have visibility: hidden?". Neither :visible nor :hidden will handle this, as they are both looking for display per the documentation. As far as I could determine, there is no selector to handle CSS visibility. Here is how I resolved it (standard jQuery selectors, there may be a more condensed syntax):

visibility: hidden

:visible

:hidden

$(".item").each(function()
if ($(this).css("visibility") == "hidden")
// handle non visible state
else
// handle visible state

);


visibility

How you would test if an element has been hidden or shown using jQuery?

display

visibility: hidden

opacity: 0

:visible

From How do I determine the state of a toggled element?

You can determine whether an element is collapsed or not by using the :visible and :hidden selectors.

:visible

:hidden

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');


If you're simply acting on an element based on its visibility, you can just include :visible or :hidden in the selector expression. For example:

:visible

:hidden

$('#myDiv:visible').animate(left: '+=200px', 'slow');


top:-1000px

Often when checking if something is visible or not, you are going to go right ahead immediately and do something else with it. jQuery chaining makes this easy.

So if you have a selector and you want to perform some action on it only if is visible or hidden, you can use filter(":visible") or filter(":hidden") followed by chaining it with the action you want to take.

filter(":visible")

filter(":hidden")

So instead of an if statement, like this:

if

if ($('#btnUpdate').is(":visible"))

$('#btnUpdate').animate( width: "toggle" ); // Hide button



Or more efficient, but even uglier:

var button = $('#btnUpdate');
if (button.is(":visible"))

button.animate( width: "toggle" ); // Hide button



You can do it all in one line:

$('#btnUpdate').filter(":visible").animate( width: "toggle" );


The :visible selector according to the jQuery documentation:

:visible

display

none

type="hidden"

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

visibility: hidden

opacity: 0

This is useful in some cases and useless in others, because if you want to check if the element is visible (display != none), ignoring the parents visibility, you will find that doing .css("display") == 'none' is not only faster, but will also return the visibility check correctly.

display != none

.css("display") == 'none'

If you want to check visibility instead of display, you should use: .css("visibility") == "hidden".

.css("visibility") == "hidden"

Also take into consideration the additional jQuery notes:

Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").

:visible

:visible

querySelectorAll()

:visible

.filter(":visible")

Also, if you are concerned about performance, you should check Now you see me… show/hide performance (2010-05-04). And use other methods to show and hide elements.

This works for me, and I am using show() and hide() to make my div hidden/visible:

show()

hide()

if( $(this).css('display') == 'none' )
/* your code goes here */
else
/* alternate logic */



How element visibility and jQuery works;

An element could be hidden with display:none, visibility:hidden or opacity:0. The difference between those methods:

display:none

visibility:hidden

opacity:0

display:none

visibility:hidden

opacity:0 hides the element as "visibility:hidden", and it still takes up space in the layout; the only difference is that opacity lets one to make an element partly transparent;

opacity:0

if ($('.target').is(':hidden'))
$('.target').show();
else
$('.target').hide();

if ($('.target').is(':visible'))
$('.target').hide();
else
$('.target').show();


if ($('.target-visibility').css('visibility') == 'hidden')
$('.target-visibility').css(
visibility: "visible",
display: ""
);
else
$('.target-visibility').css(
visibility: "hidden",
display: ""
);


if ($('.target-visibility').css('opacity') == "0")
$('.target-visibility').css(
opacity: "1",
display: ""
);
else
$('.target-visibility').css(
opacity: "0",
display: ""
);



Useful jQuery toggle methods:

$('.click').click(function()
$('.target').toggle();
);

$('.click').click(function()
$('.target').slideToggle();
);

$('.click').click(function()
$('.target').fadeToggle();
);


visibility:hidden

opacity:0

opacity:0

I would use CSS class .hide display: none!important; .

.hide display: none!important;

For hiding/showing, I call .addClass("hide")/.removeClass("hide"). For checking visibility, I use .hasClass("hide").

.addClass("hide")/.removeClass("hide")

.hasClass("hide")

It's a simple and clear way to check/hide/show elements, if you don't plan to use .toggle() or .animate() methods.

.toggle()

.animate()

.hasClass('hide')

.closest('.hide').length > 0

You can also do this using plain JavaScript:

function isRendered(domObj)


Notes:

Works everywhere

Works for nested elements

Works for CSS and inline styles

Doesn't require a framework

visibility: hidden

One can simply use the hidden or visible attribute, like:

hidden

visible

$('element:hidden')
$('element:visible')


Or you can simplify the same with is as follows.

$(element).is(":visible")


Another answer you should put into consideration is if you are hiding an element, you should use jQuery, but instead of actually hiding it, you remove the whole element, but you copy its HTML content and the tag itself into a jQuery variable, and then all you need to do is test if there is such a tag on the screen, using the normal if (!$('#thetagname').length).

if (!$('#thetagname').length)

$('#clickme').click(function()
$('#book').toggle('slow', function()
// Animation complete.
alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

Source:

Blogger Plug n Play - jQuery Tools and Widgets: How to See if Element is hidden or Visible Using jQuery

jsFiddle:

JSFiddle - ipsjolly - k4WWj

ebdiv should be set to style="display:none;". It is works for show and hide:

ebdiv

style="display:none;"

$(document).ready(function()
$("#eb").click(function()
$("#ebdiv").toggle();
);
);


When testing an element against :hidden selector in jQuery it should be considered that an absolute positioned element may be recognized as hidden although their child elements are visible.

:hidden

This seems somewhat counter-intuitive in the first place – though having a closer look at the jQuery documentation gives the relevant information:

Elements can be considered hidden for several reasons: [...] Their width and height are explicitly set to 0. [...]

So this actually makes sense in regards to the box-model and the computed style for the element. Even if width and height are not set explicitly to 0 they may be set implicitly.

Have a look at the following example:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false

.foo
position: absolute;
left: 10px;
top: 10px;
background: #ff0000;


.bar
position: absolute;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
background: #0000ff;


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
<div class="bar"></div>
</div>

UPDATE FOR JQUERY 3.x:

With jQuery 3 the described behavior will change! Elements will be considered visible if they have any layout boxes, including those of zero width and/or height.

JSFiddle with jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

The same JS will then have this output:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false


This may work:

expect($("#message_div").css("display")).toBe("none");


To check if it is not visible I use !:

!

if ( !$('#book').is(':visible'))
alert('#book is not visible')



Or the following is also the sam, saving the jQuery selector in a variable to have better performance when you need it multiple times:

var $book = $('#book')

if(!$book.is(':visible'))
alert('#book is not visible')



Example:

$(document).ready(function()
if ($("#checkme:hidden").length)
console.log('Hidden');

);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
<span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
<br>Product: Salmon Atlantic
<br>Specie: Salmo salar
<br>Form: Steaks
</div>

Using classes designated for "hiding" elements is easy and also one of the most efficient methods. Toggling a class 'hidden' with a Display style of 'none' will perform faster than editing that style directly. I explained some of this pretty thoroughly in Stack Overflow question Turning two elements visible/hidden in the same div.

Display

Here is a truly enlightening video of a Google Tech Talk by Google front-end engineer Nicholas Zakas:

Example of using the visible check for adblocker is activated:

$(document).ready(function()
if(!$("#ablockercheck").is(":visible"))
$("#ablockermsg").text("Please disable adblocker.").show();
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

"ablockercheck" is a ID which adblocker blocks. So checking it if it is visible you are able to detect if adblocker is turned On.

After all, none of examples suits me, so I wrote my own.

Tests (no support of Internet Explorer filter:alpha):

filter:alpha

a) Check if the document is not hidden

b) Check if an element has zero width / height / opacity or display:none / visibility:hidden in inline styles

display:none

visibility:hidden

c) Check if the center (also because it is faster than testing every pixel / corner) of element is not hidden by other element (and all ancestors, example: overflow:hidden / scroll / one element over enother) or screen edges

overflow:hidden

d) Check if an element has zero width / height / opacity or display:none / visibility:hidden in computed styles (among all ancestors)

display:none

Tested on

Android 4.4 (Native browser/Chrome/Firefox), Firefox (Windows/Mac), Chrome (Windows/Mac), Opera (Windows Presto/Mac Webkit), Internet Explorer (Internet Explorer 5-11 document modes + Internet Explorer 8 on a virtual machine), Safari (Windows/Mac/iOS)

var is_visible = (function () )();


How to use:

is_visible(elem) // boolean


You need to check both... Display as well as visibility:

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden")
// The element is not visible
else
// The element is visible



If we check for $(this).is(":visible"), jQuery checks for both the things automatically.

$(this).is(":visible")

Maybe you can do something like this

$(document).ready(function()
var visible = $('#tElement').is(':visible');

if(visible)
alert("visible");
// Code

else

alert("hidden");

);

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>

Because Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (as described for jQuery :visible Selector) - we can check if element is really visible in this way:

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

function isElementReallyHidden (el) $(el).css('opacity') == 0;


var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function ()
if (isElementReallyHidden(this))
booElementReallyShowed = false;

);


if($('#postcode_div').is(':visible')) {
if($('#postcode_text').val()=='')
$('#spanPost').text('u00a0');
else
$('#spanPost').text($('#postcode_text').val());



But what if the element's CSS is like the following?

.element
position: absolute;left:-9999;



So this answer to Stack Overflow question How to check if an element is off-screen should also be considered.

A function can be created in order to check for visibility/display attributes in order to gauge whether the element is shown in the UI or not.

function checkUIElementVisible(element)
return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));



Working Fiddle

Simply check visibility by checking for a boolean value, like:

if (this.hidden === false)
// Your code



I used this code for each function. Otherwise you can use is(':visible') for checking the visibility of an element.

is(':visible')

Also here's a ternary conditional expression to check the state of the element and then to toggle it:

$('someElement').on('click', function() $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); );


$('elementToToggle').toggle('slow');

:)

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).



Would you like to answer one of these unanswered questions instead?