<p>How do I toggle the visibility of an element using  <code>.hide()</code>, <code>.show()</code>, or <code>.toggle()</code>?</p>
<p>How do I test if an element is <code>visible</code> or <code>hidden</code>?</p>

```
```
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,
```
```
<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>
```
```
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.