How do I check if an element is hidden in jQuery

Question

Is it possible to toggle the visibility of an element  using the functions  hide     show   or  toggle     How would you test if an element is visible or hidden

User · Answer

There are quite a few ways to check if an element is visible or hidden in jQuery.

Demo HTML for example reference

<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>

Use Visibility Filter Selector $('element:hidden') or $('element:visible')

$('element:hidden'): Selects all elements that are hidden.
```
Example:
   $('#content2:hidden').show();
```
$('element:visible'): Selects all elements that are visible.
```
Example:
   $('#content:visible').css('color', '#EEE');
```

Read more at http://api.jquery.com/category/selectors/visibility-filter-selectors/

Use is() Filtering

    Example:
       $('#content').is(":visible").css('color', '#EEE');

    Or checking condition
    if ($('#content').is(":visible")) {
         // Perform action
    }

Read more at http://api.jquery.com/is/

User · Answer

A jQuery solution  but it is still a bit better for those who want to change the button text as well    x000D   x000D    function    x000D        showHide   click function    x000D      var btn     this   x000D          content   toggle function      x000D        btn text   this  css  display        none     Show     Hide    x000D          x000D         x000D       x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt button id  showHide  gt Hide lt  button gt  x000D   lt div id  content  gt  x000D     lt h2 gt Some content lt  h2 gt  x000D     lt p gt  x000D    What is Lorem Ipsum  Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  x000D     lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Extended function for checking if element is visible  display none  or even the opacity level It returns false if the element is not visible  function checkVisible e        if    e instanceof Element   throw Error  not an Element        const elementStyle   getComputedStyle e       if  elementStyle display      none     elementStyle visibility      visible     elementStyle opacity  lt  0 1  return false      if  e offsetWidth   e offsetHeight   e getBoundingClientRect   height           e getBoundingClientRect   width     0            return false            const elemCenter               x  e getBoundingClientRect   left   e offsetWidth   2          y  e getBoundingClientRect   top   e offsetHeight   2            if  elemCenter x  lt  0    elemCenter y  lt  0  return false      if  elemCenter x  gt   document documentElement clientWidth    window innerWidth   return false      if  elemCenter y  gt   document documentElement clientHeight    window innerHeight   return false      let pointContainer   document elementFromPoint elemCenter x  elemCenter y       do           if  pointContainer     e  return true        while  pointContainer   pointContainer parentNode       return false

User · Answer

To be fair the question pre-dates this answer   I add it not to criticise the OP  but to help anyone still asking this question   The correct way to determine whether something is visible is to consult your view-model   If you don t know what that means then you are about to embark on a journey of discovery that will make your work a great deal less difficult   Here s an overview of the model-view-view-model architecture  MVVM    KnockoutJS is a binding library that will let you try this stuff out without learning an entire framework   And here s some JavaScript code and a DIV that may or may not be visible    lt html gt   lt body gt   lt script src  https   cdnjs cloudflare com ajax libs knockout 3 4 1 knockout-min js  gt  lt  script gt   lt script gt      var vm             IsDivVisible  ko observable true             vm toggle   function data  event             Get current visibility state for the div       var x   IsDivVisible             Set it to the opposite       IsDivVisible  x             ko applyBinding vm    lt  script gt   lt div data-bind  visible  IsDivVisible  gt Peekaboo  lt  div gt   lt button data-bind  click  toggle  gt Toggle the div s visibility lt  button gt   lt  body gt   lt  html gt    Notice that the toggle function does not consult the DOM to determine the visibility of the div  it consults the view-model

User · Answer

Example of using the visible check for adblocker is activated    x000D   x000D    document  ready function    x000D    if      ablockercheck   is   visible    x000D          ablockermsg   text  Please disable adblocker    show    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  ad-placement  id  ablockercheck  gt  lt  div gt  x000D   lt div id  ablockermsg  style  display  none  gt  lt  div gt  x000D   x000D   x000D     ablockercheck  is a ID which adblocker blocks  So checking it if it is visible you are able to detect if adblocker is turned On

User · Answer

Since the question refers to a single element  this code might be more suitable      Checks CSS content for display  none block   ignores visibility  true false    element  is   visible        The same works with hidden   element  is   hidden      It is the same as twernt s suggestion  but applied to a single element  and it matches the algorithm recommended in the jQuery FAQ   We use jQuery s is   to check the selected element with another element  selector or any jQuery object  This method traverses along the DOM elements to find a match  which satisfies the passed parameter  It will return true if there is a match  otherwise return false

User · Answer

if     element  css  display       none       element  css  visibility       hidden            element  is hidden     The above method does not consider the visibility of the parent  To consider the parent as well  you should use  is   hidden   or  is   visible     For example    lt div id  div1  style  display none  gt     lt div id  div2  style  display block  gt Div2 lt  div gt   lt  div gt       The above method will consider div2 visible while  visible not  But the above might be useful in many cases  especially when you need to find if there is any error divs visible in the hidden parent because in such conditions  visible will not work

User · Answer

A function can be created in order to check for visibility display attributes in order to gauge whether the element is shown in the UI or not    function checkUIElementVisible element        return   element css  display        none    amp  amp   element css  visibility        hidden         Working Fiddle

User · Answer

if    h1   is   hidden            your code

User · Answer

if     postcode div   is   visible          if     postcode text   val                      spanPost   text   u00a0          else               spanPost   text     postcode text   val

User · Answer

You can also do this using plain JavaScript   function isRendered domObj        if   domObj nodeType    1      domObj    document body             return true            if  domObj currentStyle  amp  amp  domObj currentStyle  display       none   amp  amp  domObj currentStyle  visibility       hidden             return isRendered domObj parentNode         else if  window getComputedStyle            var cs   document defaultView getComputedStyle domObj  null           if  cs getPropertyValue  display       none   amp  amp  cs getPropertyValue  visibility       hidden                 return isRendered domObj parentNode                       return false      Notes    Works everywhere Works for nested elements Works for CSS and inline styles Doesn t require a framework

User · Answer

if     element  css  display       none       element  css  visibility       hidden            element  is hidden     The above method does not consider the visibility of the parent  To consider the parent as well  you should use  is   hidden   or  is   visible     For example    lt div id  div1  style  display none  gt     lt div id  div2  style  display block  gt Div2 lt  div gt   lt  div gt       The above method will consider div2 visible while  visible not  But the above might be useful in many cases  especially when you need to find if there is any error divs visible in the hidden parent because in such conditions  visible will not work

User · Answer

You need to check both    Display as well as visibility   if    this  css  display       none       this  css  visibility       hidden            The element is not visible   else          The element is visible     If we check for   this  is   visible    jQuery checks for both the things automatically

User · Answer

if     id element   is   visible        alert  shown     else     alert  hidden

User · Answer

If you want to check if an element is visible on the page  depending on the visibility of its parent  you can check if width and height of the element are both equal to 0   jQuery   element width       0  amp  amp   element height       0  Vanilla  element clientWidth     0  amp  amp  element clientHeight     0  Or  element offsetWidth     0  amp  amp  element offsetHeight     0

User · Answer

Because Elements with visibility  hidden or opacity  0 are considered visible  since they still consume space in the layout  as described for jQuery  visible Selector  - we can check if element is really visible in this way   function isElementReallyHidden  el        return   el  is   hidden        el  css  visibility       hidden       el  css  opacity      0     var booElementReallyShowed    isElementReallyHidden someEl     someEl  parents   each function          if  isElementReallyHidden this             booElementReallyShowed   false

User · Answer

1     jQuery solution  Methods to determine if an element is visible in jQuery   lt script gt  if      myelement   is   visible    alert    myelement is visible     if      myelement   is   hidden    alert    myelement is hidden       lt  script gt    Loop on all visible div children of the element of id  myelement        myelement div visible   each  function        Do something       Peeked at source of jQuery  This is how jQuery implements this feature   jQuery expr filters visible   function  elem         return     elem offsetWidth    elem offsetHeight    elem getClientRects   length         2     How to check if an element is off-screen - CSS  Using Element getBoundingClientRect   you can easily detect whether or not your element is within the boundaries of your viewport  i e  onscreen or offscreen    jQuery expr filters offscreen   function el      var rect   el getBoundingClientRect      return               rect x   rect width   lt  0                   rect y   rect height   lt  0                  rect x  gt  window innerWidth    rect y  gt  window innerHeight                   You could then use that in several ways      Returns all elements that are offscreen     offscreen        Boolean returned if element is offscreen    div   is   offscreen      If you use Angular  check  Don   t use hidden attribute with Angular

User · Answer

You can use a CSS class when it visible or hidden by toggling the class    show  display  block      Set your jQuery toggleClass   or addClass   or removeClass      As an example   jQuery   myID   toggleClass  show    The above code will add show css class when the element don t have show and will remove when it has show class   And when you are checking if it visible or not  You can follow this jQuery code   jQuery   myID   hasClass  show     Above code will return a boolean  true  when  myID element has our class  show  and false when it don t have the  show  class

User · Answer

The  visible selector according to the jQuery documentation         They have a CSS display value of none    They are form elements with type  hidden     Their width and height are explicitly set to 0    An ancestor element is hidden  so the element is not shown on the page          Elements with visibility  hidden or opacity  0 are considered to be visible  since they still consume space in the layout    This is useful in some cases and useless in others  because if you want to check if the element is visible  display    none   ignoring the parents visibility  you will find that doing  css  display       none  is not only faster  but will also return the visibility check correctly   If you want to check visibility instead of display  you should use   css  visibility       hidden    Also take into consideration the additional jQuery notes      Because  visible is a jQuery extension and not part of the CSS specification  queries using  visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll   method  To achieve the best performance when using  visible to select elements  first select the elements using a pure CSS selector  then use  filter   visible      Also  if you are concerned about performance  you should check Now you see me    show hide performance  2010-05-04   And use other methods to show and hide elements

User · Answer

Try  content style display     none     x000D   x000D  function toggle     x000D      content  toggle    x000D    let visible  content style display     none  x000D    console log  visible    visible   x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt button onclick  toggle    gt Show hide lt  button gt  x000D   lt div id  content  gt ABC lt  div gt  x000D   x000D   x000D

User · Answer

Just simply check if that element is visible and it will return a boolean  jQuery hides the elements by adding display none to the element  so if you want to use pure JavaScript  you can still do that  for example   if  document getElementById  element   style display      block          Your element is visible  do whatever you d like     Also  you can use jQuery as it seems the rest of your code is using that and you have smaller block of code  Something like the below in jQuery does the same trick for you   if    element  is   visible             Your element is visible  do whatever you d like      Also using the css method in jQuery can result in the same thing   if    element  css  display        block            Your element is visible  do whatever you d like     Also in case of checking for visibility and display  you can do the below   if    this  css  display        block       this  css  visibility        visible           Your element is visible  do whatever you d like

User · Answer

After all  none of examples suits me  so I wrote my own   Tests  no support of Internet nbsp Explorer filter alpha    a  Check if the document is not hidden  b  Check if an element has zero width   height   opacity or display none   visibility hidden in inline styles  c  Check if the center  also because it is faster than testing every pixel   corner  of element is not hidden by other element  and all ancestors  example  overflow hidden   scroll   one element over another  or screen edges  d  Check if an element has zero width   height   opacity or display none   visibility hidden in computed styles  among all ancestors   Tested on  Android 4 4  Native browser Chrome Firefox   Firefox  Windows Mac   Chrome  Windows Mac   Opera  Windows Presto Mac WebKit   Internet nbsp Explorer  Internet nbsp Explorer 5-11 document modes   Internet nbsp Explorer 8 on a virtual machine   and Safari  Windows Mac iOS    var is visible    function          var x   window pageXOffset   window pageXOffset   window innerWidth - 1   0          y   window pageYOffset   window pageYOffset   window innerHeight - 1   0          relative        x  amp  amp   y      document elementFromPoint x  y            function inside child  parent                while child                   if  child     parent  return true                  child   child parentNode                        return false             return function  elem            if               document hidden                elem offsetWidth  0                elem offsetHeight  0                elem style visibility   hidden                 elem style display   none                 elem style opacity   0           return false          var rect   elem getBoundingClientRect            if  relative                if   inside document elementFromPoint rect left   elem offsetWidth 2  rect top   elem offsetHeight 2  elem   return false            else if                inside document elementFromPoint rect left   elem offsetWidth 2   window pageXOffset  rect top   elem offsetHeight 2   window pageYOffset   elem                                   rect top   elem offsetHeight 2  lt  0                    rect left   elem offsetWidth 2  lt  0                    rect bottom - elem offsetHeight 2  gt   window innerHeight    document documentElement clientHeight                     rect right - elem offsetWidth 2  gt   window innerWidth    document documentElement clientWidth                          return false          if  window getComputedStyle    elem currentStyle                var el   elem                  comp   null              while  el                    if  el     document   break   else if  el parentNode  return false                  comp   window getComputedStyle   window getComputedStyle el  null    el currentStyle                  if  comp  amp  amp   comp visibility   hidden     comp display     none      typeof comp opacity     undefined   amp  amp  comp opacity    1    return false                  el   el parentNode                                  return true                How to use   is visible elem     boolean

User · Answer

Simply check for the display attribute  or visibility depending on what kind of invisibility you prefer   Example   if      invisible   css  display       none            This means the HTML element with ID  invisible  has its  display  attribute set to  none

User · Answer

Example     x000D   x000D    document  ready function     x000D    if      checkme hidden   length    x000D      console log  Hidden    x000D      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  checkme  class  product  style  display none  gt  x000D     lt span class  itemlist  gt  lt  -- Shows Results for Fish -- gt  lt  span gt  Category Fish x000D     lt br gt Product  Salmon Atlantic x000D     lt br gt Specie  Salmo salar x000D     lt br gt Form  Steaks x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Instead of writing an event for every single element  do this      div   each function      if   this  css  display        none          this  css   display   block               Also you can use it on the inputs      input   each function      if   this  attr  type        hidden          this  attr  type    text

User · Answer

But what if the element s CSS is like the following    element      position  absolute left -9999          So this answer to Stack Overflow question How to check if an element is off-screen should also be considered

User · Answer

The below code checks if an element is hidden in jQuery or visible     You can also do this                button   click function                   show hide paragraph on button click                p   toggle  slow   function                       check paragraph once toggle effect is completed                 if    p   is   visible                         alert  The paragraph  is visible                       else                      alert  The paragraph  is hidden

User · Answer

From How do I determine the state of a toggled element     You can determine whether an element is collapsed or not by using the  visible and  hidden selectors   var isVisible       myDiv   is   visible    var isHidden       myDiv   is   hidden      If you re simply acting on an element based on its visibility  you can just include  visible or  hidden in the selector expression  For example        myDiv visible   animate  left     200px     slow

User · Answer

This is how jQuery internally solves this problem   jQuery expr pseudos visible   function  elem         return     elem offsetWidth    elem offsetHeight    elem getClientRects   length         If you don t use jQuery  you can just leverage this code and turn it into your own function   function isVisible elem        return     elem offsetWidth    elem offsetHeight    elem getClientRects   length         Which isVisible will return true as long as the element is visible

User · Answer

You can use the     quot div visible quot    click function          this   css   quot background quot    quot yellow quot             quot button quot    click function           quot div hidden quot    show   quot fast quot          API Documentation  visible Selector

User · Answer

Maybe you can do something like this   x000D   x000D    document  ready function     x000D     var visible       tElement   is   visible    x000D   x000D     if visible    x000D        alert  visible    x000D                         Code x000D       x000D     else x000D       x000D        alert  hidden    x000D       x000D      x000D   lt script src  https   code jquery com jquery-1 10 2 js  gt  lt  script gt  x000D   x000D   lt input type  text  id  tElement  style  display block   gt Firstname lt  input gt  x000D   x000D   x000D

User · Answer

Another answer you should put into consideration is if you are hiding an element  you should use jQuery  but instead of actually hiding it  you remove the whole element  but you copy its HTML content and the tag itself into a jQuery variable  and then all you need to do is test if there is such a tag on the screen  using the normal if       thetagname   length

User · Answer

This may work   expect     message div   css  display    toBe  none

User · Answer

Since the question refers to a single element  this code might be more suitable      Checks CSS content for display  none block   ignores visibility  true false    element  is   visible        The same works with hidden   element  is   hidden      It is the same as twernt s suggestion  but applied to a single element  and it matches the algorithm recommended in the jQuery FAQ   We use jQuery s is   to check the selected element with another element  selector or any jQuery object  This method traverses along the DOM elements to find a match  which satisfies the passed parameter  It will return true if there is a match  otherwise return false

User · Answer

Demo Link    x000D   x000D      clickme   click function     x000D        book   toggle  slow   function     x000D         Animation complete  x000D      alert     book   is   visible        lt --- TRUE if Visible False if Hidden x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  clickme  gt  x000D    Click here x000D   lt  div gt  x000D   lt img id  book  src  https   upload wikimedia org wikipedia commons 8 87 Google Chrome icon  282011 29 png  alt    width  300   gt  x000D   x000D   x000D    Source    Blogger Plug n Play - jQuery Tools and Widgets  How to See if Element is hidden or Visible Using jQuery

User · Answer

Another answer you should put into consideration is if you are hiding an element  you should use jQuery  but instead of actually hiding it  you remove the whole element  but you copy its HTML content and the tag itself into a jQuery variable  and then all you need to do is test if there is such a tag on the screen  using the normal if       thetagname   length

User · Answer

if   element  is  quot  visible quot        console log  element is visible      else     console log  element is not visible

User · Answer

Try  content style display     none     x000D   x000D  function toggle     x000D      content  toggle    x000D    let visible  content style display     none  x000D    console log  visible    visible   x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt button onclick  toggle    gt Show hide lt  button gt  x000D   lt div id  content  gt ABC lt  div gt  x000D   x000D   x000D

User · Answer

Also here s a ternary conditional expression to check the state of the element and then to toggle it      someElement   on  click   function       elementToToggle   is   visible        elementToToggle   hide  slow        elementToToggle   show  slow

User · Answer

if     postcode div   is   visible          if     postcode text   val                      spanPost   text   u00a0          else               spanPost   text     postcode text   val

User · Answer

is   not   hidden       if shown

User · Answer

someElement   on  click   function       elementToToggle   is   visible

User · Answer

There are too many methods to check for hidden elements  This is the best choice  I just recommended you       Using jQuery  make an element   display none   in CSS for hidden    The point is      element visible     And an example for use      element visible   show

User · Answer

You can use jQuery s is   function to check the selected element visible or hidden  This method traverses along the DOM elements to find a match  which satisfies the passed parameter  It will return true if there is a match otherwise returns false    lt script gt           myelement   is   visible     alert   myelement is visible     alert   myelement is hidden     lt  script gt

User · Answer

You can use the hidden selector      Matches all elements that are hidden    element hidden     And the visible selector      Matches all elements that are visible    element visible

User · Answer

Using hidden selection you can match all hidden elements    element hidden    Using Visible selection you can match all visible elements    element visible

User · Answer

If you want to check if an element is visible on the page  depending on the visibility of its parent  you can check if width and height of the element are both equal to 0   jQuery   element width       0  amp  amp   element height       0  Vanilla  element clientWidth     0  amp  amp  element clientHeight     0  Or  element offsetWidth     0  amp  amp  element offsetHeight     0

User · Answer

You can use the hidden selector      Matches all elements that are hidden    element hidden     And the visible selector      Matches all elements that are visible    element visible

User · Answer

Simply check visibility by checking for a boolean value  like   if  this hidden     false           Your code     I used this code for each function  Otherwise you can use is   visible   for checking the visibility of an element

User · Answer

How element visibility and jQuery works   An element could be hidden with display none  visibility hidden or opacity 0  The difference between those methods    display none hides the element  and it does not take up any space  visibility hidden hides the element  but it still takes up space in the layout  opacity 0 hides the element as  visibility hidden   and it still takes up space in the layout  the only difference is that opacity lets one to make an element partly transparent      if      target   is   hidden            target   show      else         target   hide      if      target   is   visible            target   hide      else         target   show       if      target-visibility   css  visibility       hidden           target-visibility   css       visibility   visible       display             else         target-visibility   css       visibility   hidden       display              if      target-visibility   css  opacity       0           target-visibility   css       opacity   1       display             else         target-visibility   css       opacity   0       display               Useful jQuery toggle methods         click   click function           target   toggle             click   click function           target   slideToggle             click   click function           target   fadeToggle

User · Answer

Also here s a ternary conditional expression to check the state of the element and then to toggle it      someElement   on  click   function       elementToToggle   is   visible        elementToToggle   hide  slow        elementToToggle   show  slow

User · Answer

I searched for this  and none of the answers are correct for my case  so I ve created a function that will return false if one s eyes can t see the element  jQuery fn extend     isvisible  function                    This function call this     div   isvisible           Return true if the element is visible         Return false if the element is not visible for our eyes            if     this  css  display       none             console log  this        display none            return false            else if    this  css  visibility       hidden             console log  this        visibility hidden               return false            else if    this  css  opacity       0             console log  this        opacity 0            return false               else          console log  this        Is Visible            return true

User · Answer

You can use jQuery s is   function to check the selected element visible or hidden  This method traverses along the DOM elements to find a match  which satisfies the passed parameter  It will return true if there is a match otherwise returns false    lt script gt           myelement   is   visible     alert   myelement is visible     alert   myelement is hidden     lt  script gt

User · Answer

As hide    show   and toggle   attaches inline css  display none or display block  to element  Similarly  we can easily use the ternary operator to check whether the element is hidden or visible by checking display CSS  UPDATE   You also need to check if element CSS set to visibility   quot visible quot  or visibility   quot hidden quot  The element will be also visible if display property set to inline-block  block  flex   So we can check for the property of an element that makes it invisible  So they are display  none and visibility   quot hidden quot   We can create an object for checking property responsible for hiding element  var hiddenCssProps     display   quot none quot   visibility   quot hidden quot     We can check by looping through each key value in object matching if element property for key matches with hidden property value  var isHidden   false  for key in hiddenCssProps      if     element   css key     hiddenCssProps key          isHidden   true          If you want to check property like element height  0 or width  0 or more  you can extend this object and add more property to it and can check

User · Answer

The  visible selector according to the jQuery documentation         They have a CSS display value of none    They are form elements with type  hidden     Their width and height are explicitly set to 0    An ancestor element is hidden  so the element is not shown on the page          Elements with visibility  hidden or opacity  0 are considered to be visible  since they still consume space in the layout    This is useful in some cases and useless in others  because if you want to check if the element is visible  display    none   ignoring the parents visibility  you will find that doing  css  display       none  is not only faster  but will also return the visibility check correctly   If you want to check visibility instead of display  you should use   css  visibility       hidden    Also take into consideration the additional jQuery notes      Because  visible is a jQuery extension and not part of the CSS specification  queries using  visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll   method  To achieve the best performance when using  visible to select elements  first select the elements using a pure CSS selector  then use  filter   visible      Also  if you are concerned about performance  you should check Now you see me    show hide performance  2010-05-04   And use other methods to show and hide elements

User · Answer

After all  none of examples suits me  so I wrote my own   Tests  no support of Internet nbsp Explorer filter alpha    a  Check if the document is not hidden  b  Check if an element has zero width   height   opacity or display none   visibility hidden in inline styles  c  Check if the center  also because it is faster than testing every pixel   corner  of element is not hidden by other element  and all ancestors  example  overflow hidden   scroll   one element over another  or screen edges  d  Check if an element has zero width   height   opacity or display none   visibility hidden in computed styles  among all ancestors   Tested on  Android 4 4  Native browser Chrome Firefox   Firefox  Windows Mac   Chrome  Windows Mac   Opera  Windows Presto Mac WebKit   Internet nbsp Explorer  Internet nbsp Explorer 5-11 document modes   Internet nbsp Explorer 8 on a virtual machine   and Safari  Windows Mac iOS    var is visible    function          var x   window pageXOffset   window pageXOffset   window innerWidth - 1   0          y   window pageYOffset   window pageYOffset   window innerHeight - 1   0          relative        x  amp  amp   y      document elementFromPoint x  y            function inside child  parent                while child                   if  child     parent  return true                  child   child parentNode                        return false             return function  elem            if               document hidden                elem offsetWidth  0                elem offsetHeight  0                elem style visibility   hidden                 elem style display   none                 elem style opacity   0           return false          var rect   elem getBoundingClientRect            if  relative                if   inside document elementFromPoint rect left   elem offsetWidth 2  rect top   elem offsetHeight 2  elem   return false            else if                inside document elementFromPoint rect left   elem offsetWidth 2   window pageXOffset  rect top   elem offsetHeight 2   window pageYOffset   elem                                   rect top   elem offsetHeight 2  lt  0                    rect left   elem offsetWidth 2  lt  0                    rect bottom - elem offsetHeight 2  gt   window innerHeight    document documentElement clientHeight                     rect right - elem offsetWidth 2  gt   window innerWidth    document documentElement clientWidth                          return false          if  window getComputedStyle    elem currentStyle                var el   elem                  comp   null              while  el                    if  el     document   break   else if  el parentNode  return false                  comp   window getComputedStyle   window getComputedStyle el  null    el currentStyle                  if  comp  amp  amp   comp visibility   hidden     comp display     none      typeof comp opacity     undefined   amp  amp  comp opacity    1    return false                  el   el parentNode                                  return true                How to use   is visible elem     boolean

User · Answer

if     element  css  display       none       element  css  visibility       hidden            element  is hidden     The above method does not consider the visibility of the parent  To consider the parent as well  you should use  is   hidden   or  is   visible     For example    lt div id  div1  style  display none  gt     lt div id  div2  style  display block  gt Div2 lt  div gt   lt  div gt       The above method will consider div2 visible while  visible not  But the above might be useful in many cases  especially when you need to find if there is any error divs visible in the hidden parent because in such conditions  visible will not work

User · Answer

This is how jQuery internally solves this problem   jQuery expr pseudos visible   function  elem         return     elem offsetWidth    elem offsetHeight    elem getClientRects   length         If you don t use jQuery  you can just leverage this code and turn it into your own function   function isVisible elem        return     elem offsetWidth    elem offsetHeight    elem getClientRects   length         Which isVisible will return true as long as the element is visible

User · Answer

You can use a CSS class when it visible or hidden by toggling the class    show  display  block      Set your jQuery toggleClass   or addClass   or removeClass      As an example   jQuery   myID   toggleClass  show    The above code will add show css class when the element don t have show and will remove when it has show class   And when you are checking if it visible or not  You can follow this jQuery code   jQuery   myID   hasClass  show     Above code will return a boolean  true  when  myID element has our class  show  and false when it don t have the  show  class

User · Answer

You need to check both    Display as well as visibility   if    this  css  display       none       this  css  visibility       hidden            The element is not visible   else          The element is visible     If we check for   this  is   visible    jQuery checks for both the things automatically

User · Answer

Use class toggling  not style editing       Using classes designated for  quot hiding quot  elements is easy and also one of the most efficient methods  Toggling a class  hidden  with a Display style of  none  will perform faster than editing that style directly  I explained some of this pretty thoroughly in Stack Overflow question Turning two elements visible hidden in the same div   JavaScript Best Practices and Optimization Here is a truly enlightening video of a Google Tech Talk by Google front-end engineer Nicholas Zakas   Speed Up Your Javascript  YouTube

User · Answer

I just want to clarify that  in jQuery      Elements can be considered hidden for several reasons          They have a CSS display value of none    They are form elements with type  hidden     Their width and height are explicitly set to 0    An ancestor element is hidden  so the element is not shown on the page          Elements with visibility  hidden or opacity  0 are considered to be visible  since they still consume space in the layout  During animations that hide an element  the element is considered to be visible until the end of the animation       Source   hidden Selector   jQuery API Documentation   if     element   is   hidden           Do something

User · Answer

I would use CSS class  hide   display  none important       For hiding showing  I call  addClass  hide    removeClass  hide    For checking visibility  I use  hasClass  hide     It s a simple and clear way to check hide show elements  if you don t plan to use  toggle   or  animate   methods

User · Answer

Maybe you can do something like this   x000D   x000D    document  ready function     x000D     var visible       tElement   is   visible    x000D   x000D     if visible    x000D        alert  visible    x000D                         Code x000D       x000D     else x000D       x000D        alert  hidden    x000D       x000D      x000D   lt script src  https   code jquery com jquery-1 10 2 js  gt  lt  script gt  x000D   x000D   lt input type  text  id  tElement  style  display block   gt Firstname lt  input gt  x000D   x000D   x000D

User · Answer

You can use the hidden selector      Matches all elements that are hidden    element hidden     And the visible selector      Matches all elements that are visible    element visible

User · Answer

A jQuery solution  but it is still a bit better for those who want to change the button text as well    x000D   x000D    function    x000D        showHide   click function    x000D      var btn     this   x000D          content   toggle function      x000D        btn text   this  css  display        none     Show     Hide    x000D          x000D         x000D       x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt button id  showHide  gt Hide lt  button gt  x000D   lt div id  content  gt  x000D     lt h2 gt Some content lt  h2 gt  x000D     lt p gt  x000D    What is Lorem Ipsum  Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  x000D     lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Simply check for the display attribute  or visibility depending on what kind of invisibility you prefer   Example   if      invisible   css  display       none            This means the HTML element with ID  invisible  has its  display  attribute set to  none

User · Answer

You can just add a class when it is visible  Add a class  show  Then check for it have a class       elementId   hasClass  show      It returns true if you have the show class   Add CSS like this    show  display  block

User · Answer

Using hidden selection you can match all hidden elements    element hidden    Using Visible selection you can match all visible elements    element visible

User · Answer

if    h1   is   hidden            your code

User · Answer

From How do I determine the state of a toggled element     You can determine whether an element is collapsed or not by using the  visible and  hidden selectors   var isVisible       myDiv   is   visible    var isHidden       myDiv   is   hidden      If you re simply acting on an element based on its visibility  you can just include  visible or  hidden in the selector expression  For example        myDiv visible   animate  left     200px     slow

User · Answer

A function can be created in order to check for visibility display attributes in order to gauge whether the element is shown in the UI or not    function checkUIElementVisible element        return   element css  display        none    amp  amp   element css  visibility        hidden         Working Fiddle

User · Answer

This works for me  and I am using show   and hide   to make my div hidden visible   if    this  css  display       none            your code goes here      else          alternate logic

User · Answer

You can do this   isHidden   function element       return  element style display      none        if isHidden    element       true          Something

User · Answer

You can use the hidden selector      Matches all elements that are hidden    element hidden     And the visible selector      Matches all elements that are visible    element visible

User · Answer

Instead of writing an event for every single element  do this      div   each function      if   this  css  display        none          this  css   display   block               Also you can use it on the inputs      input   each function      if   this  attr  type        hidden          this  attr  type    text

User · Answer

Just simply check if that element is visible and it will return a boolean  jQuery hides the elements by adding display none to the element  so if you want to use pure JavaScript  you can still do that  for example   if  document getElementById  element   style display      block          Your element is visible  do whatever you d like     Also  you can use jQuery as it seems the rest of your code is using that and you have smaller block of code  Something like the below in jQuery does the same trick for you   if    element  is   visible             Your element is visible  do whatever you d like      Also using the css method in jQuery can result in the same thing   if    element  css  display        block            Your element is visible  do whatever you d like     Also in case of checking for visibility and display  you can do the below   if    this  css  display        block       this  css  visibility        visible           Your element is visible  do whatever you d like

User · Answer

To check if it is not visible I use     if        book   is   visible          alert   book is not visible       Or the following is also the sam  saving the jQuery selector in a variable to have better performance when you need it multiple times   var  book       book    if   book is   visible          alert   book is not visible

User · Answer

Example     x000D   x000D    document  ready function     x000D    if      checkme hidden   length    x000D      console log  Hidden    x000D      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  checkme  class  product  style  display none  gt  x000D     lt span class  itemlist  gt  lt  -- Shows Results for Fish -- gt  lt  span gt  Category Fish x000D     lt br gt Product  Salmon Atlantic x000D     lt br gt Specie  Salmo salar x000D     lt br gt Form  Steaks x000D   lt  div gt  x000D   x000D   x000D

User · Answer

But what if the element s CSS is like the following    element      position  absolute left -9999          So this answer to Stack Overflow question How to check if an element is off-screen should also be considered

User · Answer

There are too many methods to check for hidden elements  This is the best choice  I just recommended you       Using jQuery  make an element   display none   in CSS for hidden    The point is      element visible     And an example for use      element visible   show

User · Answer

As hide    show   and toggle   attaches inline css  display none or display block  to element  Similarly  we can easily use the ternary operator to check whether the element is hidden or visible by checking display CSS  UPDATE   You also need to check if element CSS set to visibility   quot visible quot  or visibility   quot hidden quot  The element will be also visible if display property set to inline-block  block  flex   So we can check for the property of an element that makes it invisible  So they are display  none and visibility   quot hidden quot   We can create an object for checking property responsible for hiding element  var hiddenCssProps     display   quot none quot   visibility   quot hidden quot     We can check by looping through each key value in object matching if element property for key matches with hidden property value  var isHidden   false  for key in hiddenCssProps      if     element   css key     hiddenCssProps key          isHidden   true          If you want to check property like element height  0 or width  0 or more  you can extend this object and add more property to it and can check

User · Answer

I just want to clarify that  in jQuery      Elements can be considered hidden for several reasons          They have a CSS display value of none    They are form elements with type  hidden     Their width and height are explicitly set to 0    An ancestor element is hidden  so the element is not shown on the page          Elements with visibility  hidden or opacity  0 are considered to be visible  since they still consume space in the layout  During animations that hide an element  the element is considered to be visible until the end of the animation       Source   hidden Selector   jQuery API Documentation   if     element   is   hidden           Do something

User · Answer

You can use the     quot div visible quot    click function          this   css   quot background quot    quot yellow quot             quot button quot    click function           quot div hidden quot    show   quot fast quot          API Documentation  visible Selector

User · Answer

Since the question refers to a single element  this code might be more suitable      Checks CSS content for display  none block   ignores visibility  true false    element  is   visible        The same works with hidden   element  is   hidden      It is the same as twernt s suggestion  but applied to a single element  and it matches the algorithm recommended in the jQuery FAQ   We use jQuery s is   to check the selected element with another element  selector or any jQuery object  This method traverses along the DOM elements to find a match  which satisfies the passed parameter  It will return true if there is a match  otherwise return false

User · Answer

The below code checks if an element is hidden in jQuery or visible     You can also do this                button   click function                   show hide paragraph on button click                p   toggle  slow   function                       check paragraph once toggle effect is completed                 if    p   is   visible                         alert  The paragraph  is visible                       else                      alert  The paragraph  is hidden

User · Answer

This may work   expect     message div   css  display    toBe  none

User · Answer

None of these answers address what I understand to be the question  which is what I was searching for   How do I handle items that have visibility  hidden    Neither  visible nor  hidden will handle this  as they are both looking for display per the documentation   As far as I could determine  there is no selector to handle CSS visibility   Here is how I resolved it  standard jQuery selectors  there may be a more condensed syntax        item   each function         if    this  css  visibility       hidden                handle non visible state       else              handle visible state

User · Answer

ebdiv should be set to style  display none    It works for both show and hide     document  ready function            eb   click function                ebdiv   toggle

User · Answer

One can simply use the hidden or visible attribute  like      element hidden      element visible     Or you can simplify the same with is as follows     element  is   visible

User · Answer

You can use this     element  is   visible      Example code   x000D   x000D    document  ready function   x000D    x000D          toggle   click function   x000D        x000D              content   toggle    x000D          x000D   x000D          visiblity   click function   x000D        x000D         if      content   is   visible     x000D           x000D            alert  visible       Put your code for visibility x000D           x000D         else x000D           x000D            alert  hidden    x000D           x000D          x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 12 2 jquery min js  gt  lt  script gt  x000D   x000D   lt p id  content  gt This is a Content lt  p gt  x000D   x000D   lt button id  toggle  gt Toggle Content Visibility lt  button gt  x000D   lt button id  visibility  gt Check Visibility lt  button gt  x000D   x000D   x000D

User · Answer

if     element  css  display       none       element  css  visibility       hidden            element  is hidden     The above method does not consider the visibility of the parent  To consider the parent as well  you should use  is   hidden   or  is   visible     For example    lt div id  div1  style  display none  gt     lt div id  div2  style  display block  gt Div2 lt  div gt   lt  div gt       The above method will consider div2 visible while  visible not  But the above might be useful in many cases  especially when you need to find if there is any error divs visible in the hidden parent because in such conditions  visible will not work

User · Answer

1     jQuery solution  Methods to determine if an element is visible in jQuery   lt script gt  if      myelement   is   visible    alert    myelement is visible     if      myelement   is   hidden    alert    myelement is hidden       lt  script gt    Loop on all visible div children of the element of id  myelement        myelement div visible   each  function        Do something       Peeked at source of jQuery  This is how jQuery implements this feature   jQuery expr filters visible   function  elem         return     elem offsetWidth    elem offsetHeight    elem getClientRects   length         2     How to check if an element is off-screen - CSS  Using Element getBoundingClientRect   you can easily detect whether or not your element is within the boundaries of your viewport  i e  onscreen or offscreen    jQuery expr filters offscreen   function el      var rect   el getBoundingClientRect      return               rect x   rect width   lt  0                   rect y   rect height   lt  0                  rect x  gt  window innerWidth    rect y  gt  window innerHeight                   You could then use that in several ways      Returns all elements that are offscreen     offscreen        Boolean returned if element is offscreen    div   is   offscreen      If you use Angular  check  Don   t use hidden attribute with Angular

User · Answer

You can also     hideShow         quot  accordionZiarat quot   hide         Checks CSS content for display  none block   ignores visibility  true false    if     quot  accordionZiarat quot   is  quot  visible quot             quot  accordionZiarat quot   hide              else if     quot  accordionZiarat quot   is  quot  hidden quot             quot  accordionZiarat quot   show           else

User · Answer

Simply check visibility by checking for a boolean value  like   if  this hidden     false           Your code     I used this code for each function  Otherwise you can use is   visible   for checking the visibility of an element

User · Answer

I searched for this  and none of the answers are correct for my case  so I ve created a function that will return false if one s eyes can t see the element  jQuery fn extend     isvisible  function                    This function call this     div   isvisible           Return true if the element is visible         Return false if the element is not visible for our eyes            if     this  css  display       none             console log  this        display none            return false            else if    this  css  visibility       hidden             console log  this        visibility hidden               return false            else if    this  css  opacity       0             console log  this        opacity 0            return false               else          console log  this        Is Visible            return true

User · Answer

Use class toggling  not style editing       Using classes designated for  quot hiding quot  elements is easy and also one of the most efficient methods  Toggling a class  hidden  with a Display style of  none  will perform faster than editing that style directly  I explained some of this pretty thoroughly in Stack Overflow question Turning two elements visible hidden in the same div   JavaScript Best Practices and Optimization Here is a truly enlightening video of a Google Tech Talk by Google front-end engineer Nicholas Zakas   Speed Up Your Javascript  YouTube

User · Answer

if     id element   is   visible        alert  shown     else     alert  hidden

User · Answer

When testing an element against  hidden selector in jQuery it should be considered that an absolute positioned element may be recognized as hidden although their child elements are visible   This seems somewhat counter-intuitive in the first place     though having a closer look at the jQuery documentation gives the relevant information      Elements can be considered hidden for several reasons        Their width and height are explicitly set to 0          So this actually makes sense in regards to the box-model and the computed style for the element  Even if width and height are not set explicitly to 0 they may be set implicitly   Have a look at the following example    x000D   x000D  console log     foo   is   hidden        true x000D  console log     bar   is   hidden        false x000D   foo   x000D    position  absolute  x000D    left  10px  x000D    top  10px  x000D    background   ff0000  x000D    x000D   x000D   bar   x000D    position  absolute  x000D    left  10px  x000D    top  10px  x000D    width  20px  x000D    height  20px  x000D    background   0000ff  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  foo  gt  x000D     lt div class  bar  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      Update for jQuery 3 x   With jQuery 3 the described behavior will change  Elements will be considered visible if they have any layout boxes  including those of zero width and or height   JSFiddle with jQuery 3 0 0-alpha1   http   jsfiddle net pM2q3 7   The same JavaScript code will then have this output   console log     foo   is   hidden        false console log     bar   is   hidden        false

User · Answer

if   element  is  quot  visible quot        console log  element is visible      else     console log  element is not visible

User · Answer

Because Elements with visibility  hidden or opacity  0 are considered visible  since they still consume space in the layout  as described for jQuery  visible Selector  - we can check if element is really visible in this way   function isElementReallyHidden  el        return   el  is   hidden        el  css  visibility       hidden       el  css  opacity      0     var booElementReallyShowed    isElementReallyHidden someEl     someEl  parents   each function          if  isElementReallyHidden this             booElementReallyShowed   false

User · Answer

To be fair the question pre-dates this answer   I add it not to criticise the OP  but to help anyone still asking this question   The correct way to determine whether something is visible is to consult your view-model   If you don t know what that means then you are about to embark on a journey of discovery that will make your work a great deal less difficult   Here s an overview of the model-view-view-model architecture  MVVM    KnockoutJS is a binding library that will let you try this stuff out without learning an entire framework   And here s some JavaScript code and a DIV that may or may not be visible    lt html gt   lt body gt   lt script src  https   cdnjs cloudflare com ajax libs knockout 3 4 1 knockout-min js  gt  lt  script gt   lt script gt      var vm             IsDivVisible  ko observable true             vm toggle   function data  event             Get current visibility state for the div       var x   IsDivVisible             Set it to the opposite       IsDivVisible  x             ko applyBinding vm    lt  script gt   lt div data-bind  visible  IsDivVisible  gt Peekaboo  lt  div gt   lt button data-bind  click  toggle  gt Toggle the div s visibility lt  button gt   lt  body gt   lt  html gt    Notice that the toggle function does not consult the DOM to determine the visibility of the div  it consults the view-model

User · Answer

When testing an element against  hidden selector in jQuery it should be considered that an absolute positioned element may be recognized as hidden although their child elements are visible   This seems somewhat counter-intuitive in the first place     though having a closer look at the jQuery documentation gives the relevant information      Elements can be considered hidden for several reasons        Their width and height are explicitly set to 0          So this actually makes sense in regards to the box-model and the computed style for the element  Even if width and height are not set explicitly to 0 they may be set implicitly   Have a look at the following example    x000D   x000D  console log     foo   is   hidden        true x000D  console log     bar   is   hidden        false x000D   foo   x000D    position  absolute  x000D    left  10px  x000D    top  10px  x000D    background   ff0000  x000D    x000D   x000D   bar   x000D    position  absolute  x000D    left  10px  x000D    top  10px  x000D    width  20px  x000D    height  20px  x000D    background   0000ff  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  foo  gt  x000D     lt div class  bar  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      Update for jQuery 3 x   With jQuery 3 the described behavior will change  Elements will be considered visible if they have any layout boxes  including those of zero width and or height   JSFiddle with jQuery 3 0 0-alpha1   http   jsfiddle net pM2q3 7   The same JavaScript code will then have this output   console log     foo   is   hidden        false console log     bar   is   hidden        false

User · Answer

There are quite a few ways to check if an element is visible or hidden in jQuery.

Demo HTML for example reference

<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>

Use Visibility Filter Selector $('element:hidden') or $('element:visible')

$('element:hidden'): Selects all elements that are hidden.
```
Example:
   $('#content2:hidden').show();
```
$('element:visible'): Selects all elements that are visible.
```
Example:
   $('#content:visible').css('color', '#EEE');
```

Read more at http://api.jquery.com/category/selectors/visibility-filter-selectors/

Use is() Filtering

    Example:
       $('#content').is(":visible").css('color', '#EEE');

    Or checking condition
    if ($('#content').is(":visible")) {
         // Perform action
    }

Read more at http://api.jquery.com/is/

User · Answer

This is some option to check that tag is visible or not   x000D   x000D      using a pure CSS selector   x000D     if     p visible        x000D        alert  Paragraphs are visible  checked using a CSS selector         x000D          x000D     x000D        using jQuery s is   method   x000D     if     p   is   visible        x000D        alert  Paragraphs are visible  checked using is   method        x000D          x000D     x000D        using jQuery s filter   method   x000D     if     p   filter   visible        x000D        alert  Paragraphs are visible  checked using filter   method        x000D          x000D     x000D        you can use  hidden instead of  visible to reverse the logic and check if an element is hidden   x000D        if     p hidden        x000D           do something   x000D             x000D   x000D   x000D

User · Answer

One can simply use the hidden or visible attribute  like      element hidden      element visible     Or you can simplify the same with is as follows     element  is   visible

User · Answer

This works for me  and I am using show   and hide   to make my div hidden visible   if    this  css  display       none            your code goes here      else          alternate logic

User · Answer

is   not   hidden       if shown

User · Answer

Demo Link    x000D   x000D      clickme   click function     x000D        book   toggle  slow   function     x000D         Animation complete  x000D      alert     book   is   visible        lt --- TRUE if Visible False if Hidden x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  clickme  gt  x000D    Click here x000D   lt  div gt  x000D   lt img id  book  src  https   upload wikimedia org wikipedia commons 8 87 Google Chrome icon  282011 29 png  alt    width  300   gt  x000D   x000D   x000D    Source    Blogger Plug n Play - jQuery Tools and Widgets  How to See if Element is hidden or Visible Using jQuery

User · Answer

You can just add a class when it is visible  Add a class  show  Then check for it have a class       elementId   hasClass  show      It returns true if you have the show class   Add CSS like this    show  display  block

User · Answer

Example of using the visible check for adblocker is activated    x000D   x000D    document  ready function    x000D    if      ablockercheck   is   visible    x000D          ablockermsg   text  Please disable adblocker    show    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  ad-placement  id  ablockercheck  gt  lt  div gt  x000D   lt div id  ablockermsg  style  display  none  gt  lt  div gt  x000D   x000D   x000D     ablockercheck  is a ID which adblocker blocks  So checking it if it is visible you are able to detect if adblocker is turned On

User · Answer

You can do this   isHidden   function element       return  element style display      none        if isHidden    element       true          Something

User · Answer

You can also do this using plain JavaScript   function isRendered domObj        if   domObj nodeType    1      domObj    document body             return true            if  domObj currentStyle  amp  amp  domObj currentStyle  display       none   amp  amp  domObj currentStyle  visibility       hidden             return isRendered domObj parentNode         else if  window getComputedStyle            var cs   document defaultView getComputedStyle domObj  null           if  cs getPropertyValue  display       none   amp  amp  cs getPropertyValue  visibility       hidden                 return isRendered domObj parentNode                       return false      Notes    Works everywhere Works for nested elements Works for CSS and inline styles Doesn t require a framework

User · Answer

ebdiv should be set to style  display none    It works for both show and hide     document  ready function            eb   click function                ebdiv   toggle

User · Answer

You can use this     element  is   visible      Example code   x000D   x000D    document  ready function   x000D    x000D          toggle   click function   x000D        x000D              content   toggle    x000D          x000D   x000D          visiblity   click function   x000D        x000D         if      content   is   visible     x000D           x000D            alert  visible       Put your code for visibility x000D           x000D         else x000D           x000D            alert  hidden    x000D           x000D          x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 12 2 jquery min js  gt  lt  script gt  x000D   x000D   lt p id  content  gt This is a Content lt  p gt  x000D   x000D   lt button id  toggle  gt Toggle Content Visibility lt  button gt  x000D   lt button id  visibility  gt Check Visibility lt  button gt  x000D   x000D   x000D

User · Answer

You can also     hideShow         quot  accordionZiarat quot   hide         Checks CSS content for display  none block   ignores visibility  true false    if     quot  accordionZiarat quot   is  quot  visible quot             quot  accordionZiarat quot   hide              else if     quot  accordionZiarat quot   is  quot  hidden quot             quot  accordionZiarat quot   show           else

User · Answer

None of these answers address what I understand to be the question  which is what I was searching for   How do I handle items that have visibility  hidden    Neither  visible nor  hidden will handle this  as they are both looking for display per the documentation   As far as I could determine  there is no selector to handle CSS visibility   Here is how I resolved it  standard jQuery selectors  there may be a more condensed syntax        item   each function         if    this  css  visibility       hidden                handle non visible state       else              handle visible state

User · Answer

This is some option to check that tag is visible or not   x000D   x000D      using a pure CSS selector   x000D     if     p visible        x000D        alert  Paragraphs are visible  checked using a CSS selector         x000D          x000D     x000D        using jQuery s is   method   x000D     if     p   is   visible        x000D        alert  Paragraphs are visible  checked using is   method        x000D          x000D     x000D        using jQuery s filter   method   x000D     if     p   filter   visible        x000D        alert  Paragraphs are visible  checked using filter   method        x000D          x000D     x000D        you can use  hidden instead of  visible to reverse the logic and check if an element is hidden   x000D        if     p hidden        x000D           do something   x000D             x000D   x000D   x000D

User · Answer

Since the question refers to a single element  this code might be more suitable      Checks CSS content for display  none block   ignores visibility  true false    element  is   visible        The same works with hidden   element  is   hidden      It is the same as twernt s suggestion  but applied to a single element  and it matches the algorithm recommended in the jQuery FAQ   We use jQuery s is   to check the selected element with another element  selector or any jQuery object  This method traverses along the DOM elements to find a match  which satisfies the passed parameter  It will return true if there is a match  otherwise return false

User · Answer

To check if it is not visible I use     if        book   is   visible          alert   book is not visible       Or the following is also the sam  saving the jQuery selector in a variable to have better performance when you need it multiple times   var  book       book    if   book is   visible          alert   book is not visible

User · Answer

I would use CSS class  hide   display  none important       For hiding showing  I call  addClass  hide    removeClass  hide    For checking visibility  I use  hasClass  hide     It s a simple and clear way to check hide show elements  if you don t plan to use  toggle   or  animate   methods

User · Answer

someElement   on  click   function       elementToToggle   is   visible

User · Answer

Often when checking if something is visible or not  you are going to go right ahead immediately and do something else with it  jQuery chaining makes this easy   So if you have a selector and you want to perform some action on it only if is visible or hidden  you can use filter   visible   or filter   hidden   followed by chaining it with the action you want to take   So instead of an if statement  like this   if      btnUpdate   is   visible               btnUpdate   animate   width   toggle           Hide button     Or more efficient  but even uglier   var button       btnUpdate    if  button is   visible           button animate   width   toggle           Hide button     You can do it all in one line       btnUpdate   filter   visible   animate   width   toggle

User · Answer

Often when checking if something is visible or not  you are going to go right ahead immediately and do something else with it  jQuery chaining makes this easy   So if you have a selector and you want to perform some action on it only if is visible or hidden  you can use filter   visible   or filter   hidden   followed by chaining it with the action you want to take   So instead of an if statement  like this   if      btnUpdate   is   visible               btnUpdate   animate   width   toggle           Hide button     Or more efficient  but even uglier   var button       btnUpdate    if  button is   visible           button animate   width   toggle           Hide button     You can do it all in one line       btnUpdate   filter   visible   animate   width   toggle

User · Answer

Extended function for checking if element is visible  display none  or even the opacity level It returns false if the element is not visible  function checkVisible e        if    e instanceof Element   throw Error  not an Element        const elementStyle   getComputedStyle e       if  elementStyle display      none     elementStyle visibility      visible     elementStyle opacity  lt  0 1  return false      if  e offsetWidth   e offsetHeight   e getBoundingClientRect   height           e getBoundingClientRect   width     0            return false            const elemCenter               x  e getBoundingClientRect   left   e offsetWidth   2          y  e getBoundingClientRect   top   e offsetHeight   2            if  elemCenter x  lt  0    elemCenter y  lt  0  return false      if  elemCenter x  gt   document documentElement clientWidth    window innerWidth   return false      if  elemCenter y  gt   document documentElement clientHeight    window innerHeight   return false      let pointContainer   document elementFromPoint elemCenter x  elemCenter y       do           if  pointContainer     e  return true        while  pointContainer   pointContainer parentNode       return false

User · Answer

How element visibility and jQuery works   An element could be hidden with display none  visibility hidden or opacity 0  The difference between those methods    display none hides the element  and it does not take up any space  visibility hidden hides the element  but it still takes up space in the layout  opacity 0 hides the element as  visibility hidden   and it still takes up space in the layout  the only difference is that opacity lets one to make an element partly transparent      if      target   is   hidden            target   show      else         target   hide      if      target   is   visible            target   hide      else         target   show       if      target-visibility   css  visibility       hidden           target-visibility   css       visibility   visible       display             else         target-visibility   css       visibility   hidden       display              if      target-visibility   css  opacity       0           target-visibility   css       opacity   1       display             else         target-visibility   css       opacity   0       display               Useful jQuery toggle methods         click   click function           target   toggle             click   click function           target   slideToggle             click   click function           target   fadeToggle

[javascript] How do I check if an element is hidden in jQuery?

Examples related to javascript

Examples related to jquery

Examples related to dom

Examples related to visibility