jQuery: Check if an element is invisible

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

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