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


(Kunni Can) #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!

(Sine) #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.

(Yassine) #3

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

To Check that is Visible:


To Check that is Hidden:


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

if ($('.target').is(':hidden')) {
else {
if ($('.target').is(':visible')) {
else {

hope that helps :slight_smile:

(Arrowsoft.IT Srls) #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.