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

Question

How do I toggle the visibility of an element using .hide(), .show(), or .toggle()?

How do I test if an element is visible or hidden?

• Reuben: It's worth mentioning (even after all this time), that $(element).is(":visible") works for jQuery 1.4.4, but not for jQuery 1.3.2, under Internet Explorer 8. This can be tested using Tsvetomir Tsonev's helpful test snippet. Just remember to change the version of jQuery, to test under each one.
• Mark Schultheiss: This is related although a different question: stackoverflow.com/questions/17425543/…
• user1742529: If you are not interested in virtual css element hiding, but physical visibility in "viewport area" for user then cosider to see stackoverflow.com/questions/487073/… and stackoverflow.com/questions/123999/…

Answer 1

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

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");

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

We use jQuery's is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match, otherwise return false.

• kralco626: This solution would seem to encourage the confustion of visible=false and display:none; whereas Mote's solution clearly illistrates the coders intent to check the display:none; (via mention of hide and show which control display:none not visible=true)
• Tsvetomir Tsonev: That is correct, but :visible will also check if the parent elements are visible, as chiborg pointed out.
• Tsvetomir Tsonev: You have a point - I'll make it clear that the code checks only for the display property. Given that the the original question is for show() and hide(), and they set display, my answer is correct. By the way it does work with IE7, here's a test snippet - jsfiddle.net/MWZss
• Kzqai: I actually found that the reverse logic words better: !$('selector').is(':hidden'); for some reason. Worth a try.
• Max Leske: Here's a simple benchmark testing is() against regexp:jsperf.com/jquery-is-vs-regexp-for-css-visibility. Conclusion: if you're out for performance, use regexp over is() (since is() looks for all hidden nodes first before looking at the actual element).

Answer 2

You can use the hidden selector:

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

And the visible selector:

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

• codecraig: just be careful, there are some good performance related tips in this presentation: addyosmani.com/jqprovenperformance
• Etienne Dupuis: On pages 21 to 28 it shows how slow :hidden or :visible is compared to other selectors. Thanks for pointing this.
• vbullinger: When you're dealing with a couple of elements and very little is going on - i.e. THE ABSURDLY VAST MAJORITY OF CASES - the time issue is a ridiculously minor concern. Oh, noes! It took 42 ms instead of 19 ms!!!
• ZoomIn: I am toggling the element mamually using this selector. $('element:hidden') is always true for me!
• Yoshi Walsh: @cwingrav You might want to re-read the documentation, :hidden applies to all elements. Form elements with type="hidden" is just one case that can trigger :hidden. Elements with no height and width, elements with display: none, and elements with hidden ancestors will also qualify as :hidden.

Answer 3

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

The above method does not consider the visibility of the parent. To consider the parent as well, you should use .is(":hidden") or .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.

• chiborg: This only checks for the display property of a single element. The :visible attribute checks also the visibility of the parent elements.
• evanmcd: This is the only solution that worked for me when testing with IE 8.
• Casey: @chiborg Yes, but sometimes that's what you want and I had to learn the hard way how "clever" jQuery was...
• Jimmy Knoot: This does answer the question, being the question is about a single element and by using the hide(), show() and toggle() functions, however, as most have already said, we should use the :visible and :hidden pseudo-classes.
• atheaos: This answer can be used when an element exists but is not currently on the page, such as after detach().

Answer 4

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):

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

• MarioDS: This answer is good to handle visibility literally, but the question was How you would test if an element has been hidden or shown using jQuery?. Using jQuery means: the display property.
• awe: Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout. See answer by Pedro Rainho and jQuery documentation on the :visible selector.
• vsync: you need to traverse up the DOM to check the node's parents, or else ,this is useless.

Answer 5

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.

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:

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

• jazzcat: wondering why no answer mentions the case when element is moved away from the visible window, like top:-1000px... Guess it's an edge-case

Answer 6

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.

So instead of an if statement, like this:

if ($('#btnUpdate').is(":visible"))
{
 $('#btnUpdate').animate({ width: "toggle" }); // Hide button
}

Or more efficiently:

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" });

• LocalPCGuy: No reason to extract the DOM node in the snippet used in the example, and then have to look it back up again. Better to just do: var $button = $('#btnUpdate'); And then in the If expressions just use $button instead of $(button). Has the advantage of caching the jQuery object.
• Ketan Savaliya: here's is a simple example jquerypot.com/…

Answer 7

The :visible selector according to the jQuery documentation:

• 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.

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.

If you want to check visibility instead of display, you should use: .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").

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.

Answer 8

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 hides the element, and it does not take up any space;
• visibility:hidden hides the element, but it still takes up space in the layout;

• 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;

  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();
  });
  

• urraka: Another difference between visibility:hidden and opacity:0 is that the element will still respond to events (like clicks) with opacity:0. I learned that trick making a custom button for file uploads.
• YangombiUmpakati: also if you hide input with opacity:0, it still gets selected with tab key

Answer 9

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

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

Answer 10

You can also do this using plain JavaScript:

function isRendered(domObj) {
 if ((domObj.nodeType != 1) || (domObj == document.body)) {
 return true;
 }
 if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
 return isRendered(domObj.parentNode);
 } else if (window.getComputedStyle) {
 var cs = document.defaultView.getComputedStyle(domObj, null);
 if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
 return isRendered(domObj.parentNode);
 }
 }
 return false;
}

Notes:

1. Works everywhere

2. Works for nested elements

3. Works for CSS and inline styles

4. Doesn't require a framework

• alex: Works slightly differently to jQuery's; it considers visibility: hidden to be visible.
• Matt Brock: It's easy enough to change the code above to mimic the (arguably stupid) jQuery behavior. . . . . function isRendered(o){if((o.nodeType!=1)||(o==document.body)){return true;}if(o.currentStyle&&o.currentStyle["display"]!="none"){return isRendered(o.parentNode);}else if(window.getComputedStyle){if(document.defaultView.getComputedStyle(o, null).getPropertyValue("display")!="none"){return isRendered(o.parentNode);}}return false;}

Answer 11

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

For hiding/showing, I call .addClass("hide")/.removeClass("hide"). For checking visibility, I use .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.

• nbrooks: .hasClass('hide') doesn't check if an ancestor of the parent is hidden (which would make it hidden too). You could possibly get this to work correctly by checking if .closest('.hide').length > 0, but why reinvent the wheel?
• user571203: Variant you propose returns if element visible on html, my variant returns if element was directly hidden by your javascript code/view engine. If your know that parent elements should never be hidden - use .hasClass() to be more strict and prevent future bugs. If you want to check not only visibility but element state set too - use .hasClass() too. In other cases .closest() is better.

Answer 12

Demo Link

$('#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="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

Source (from my blog):

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

Answer 13

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

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

Answer 14

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

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

Or you can simplify the same with is as follows.

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

Answer 15

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).

Answer 16

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.

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 JavaScript code will then have this output:

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

Answer 17

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

Answer 18

$(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>

Answer 19

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')
}

• Ilia Ross: How did you determined that saving a selector in variable is really faster?
• Matthias Wegtun: Hi @Ilia Rostovtsev jsperf.com/caching-jquery-selectors There you can run the test. Anyways it's nice to have it cached so it can be accessed faster
• Kenneth P.: This is suitable if you want to use a single variable through out the process instead of calling and calling the same object.

Answer 20

Use class toggling, not style editing . . .

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 .

---

JavaScript Best Practices and Optimization

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

• Speed Up Your Javascript (YouTube)

Answer 21

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

Tests (no support of Internet Explorer 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

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 another) or screen edges

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

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), and Safari (Windows/Mac/iOS).

var is_visible = (function () {
 var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
 y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
 relative = !!((!x && !y) || !document.elementFromPoint(x, y));
 function inside(child, parent) {
 while(child){
 if (child === parent) return true;
 child = child.parentNode;
 }
 return false;
 };
 return function (elem) {
 if (
 document.hidden ||
 elem.offsetWidth==0 ||
 elem.offsetHeight==0 ||
 elem.style.visibility=='hidden' ||
 elem.style.display=='none' ||
 elem.style.opacity===0
 ) return false;
 var rect = elem.getBoundingClientRect();
 if (relative) {
 if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
 } else if (
 !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
 (
 rect.top + elem.offsetHeight/2 < 0 ||
 rect.left + elem.offsetWidth/2 < 0 ||
 rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
 rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
 )
 ) return false;
 if (window.getComputedStyle || elem.currentStyle) {
 var el = elem,
 comp = null;
 while (el) {
 if (el === document) {break;} else if(!el.parentNode) return false;
 comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
 if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
 el = el.parentNode;
 }
 }
 return true;
 }
})();

How to use:

is_visible(elem) // boolean

Answer 22

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.

Answer 23

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

var $this = $(this)
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.

Answer 24

$(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>

Answer 25

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.

Answer 26

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:

function isElementReallyHidden (el) {
 return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}
var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
 if (isElementReallyHidden(this)) {
 booElementReallyShowed = false;
 }
});

Answer 27

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.

Answer 28

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

Answer 29

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'); });

• nbrooks: Or, y'kno, just get rid of the entire conditional and say $('elementToToggle').toggle('slow');... :)

Answer 30

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