00 Votes

jQuery: Check if an element is invisible

Question by Guest | 2018-11-27 at 08:23

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?

ReplyPositiveNegativeDateVotes
Avatar
1Best Answer1 Vote

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.
2018-11-27 at 18:21

ReplyPositive Negative
Avatar
00 Votes

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

$("div:hidden").show();
$("span:visible").hide();

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
Reply

Related Topics

jQuery: Show and hide elements

Tutorial | 0 Comments

jQuery: Replace element

Question | 1 Answer

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.

Participate

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