11 Vote

jQuery: Check if an element is invisible

Question by Guest | Last update on 2021-03-25 | Created on 2018-11-27

Using the functions .hide(), .show(), and .toggle(), I can easily change the visibility of items with jQuery.

But how can I use jQuery or JavaScript to figure out if an element is currently visible or invisible (hidden) at the moment?

2Best Answer2 Votes

You can use the selectors :visible and :hidden.

This can look like this, for example:

if ($('#element1').is(":visible")) {
   alert('element1 is visible');

if ($('#element2').is(":hidden")) {
   alert('element2 is invisible');

Any element that claims space within your page is considered to be visible by jQuery. Therefore, for example, elements with opacity: 0 or visibility: hidden are considered visible because they use space in the layout despite their invisibility.

The selector :visible is always the opposite of the selector :hidden. That is, an element is always either one or the other.
Last update on 2021-03-25 | Created on 2018-11-27

ReplyPositive Negative
11 Vote

If you want to select all elements that are visible or invisible, you can use :visible and :hidden in the following ways:


The first line displays all divs that were previously invisible. The second line hides all visible spans.
2018-11-28 at 15:08

ReplyPositive Negative

Related Topics

jQuery: Show and hide elements

Tutorial | 0 Comments

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own article on askingbox.com. That’s how it’s done.