0 0 Votes

jQuery: Check if an element is invisible

Question by Guest | 27/11/2018 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

Stefan Trost

Show Profile | Message
Avatar
1Best Answer
1 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.
27/11/2018 at 18:21

ReplyPositive Negative

NetLabel

Show Profile | Message
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.
28/11/2018 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 articles on askingbox.com. How to do.