Stopbyte

How to Know if HTML Element is Visible or Hidden using Javascript and JQuery?

Web Development JQuery
,
#1

How can I check to know if an HTML element is visible or not (hidden) using Javascript and/or JQuery?

And also how can I change the visibility of that element if possible?

thanks in advance!

1 Like
#2

it’s easy use this : $(element).is(":visible")
it returns true if the element is visible, otherwise false.

P.S. replace "element" by the real HTML element ID.

1 Like
#3

You can simply check for a HTML element visibility using JQuery this way:

To Check that is Visible:

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

To Check that is Hidden:

$(element).is(":hidden");

And to Toggle both states Hidden and Visible you can do it this way:

if ($('.target').is(':hidden')) {
    $('.target').show();
} 
else {
    $('.target').hide();
}
if ($('.target').is(':visible')) {
    $('.target').hide();
} 
else {
    $('.target').show();
}

hope that helps :slight_smile:

#4

If you need to be sure that the element is invisible or visible you have to check:

  • css visibility prop
  • css opacity prop
  • element position and offset (think for example to a visibile element with position:fixed and top:-1000000px)
  • you have to check zIndex (if there are another element before it)

This list could be not complete.