Question

HTML:

<div id="box">my box</div>​

How come I can hide a visible div like this: http://jsfiddle.net/FfaVW/2/

CSS:

#box {
    visibility:visible;
}​

JS:

jQuery('#box').hide();​

But I can’t show an hidden div like this: http://jsfiddle.net/FfaVW/1/

CSS:

#box {
    visibility:hidden;
}​

JS:

jQuery('#box').show();​

Answer 1

show() alters the display CSS property, not visibility.

http://api.jquery.com/show/

It will show a display: none for example.

http://api.jquery.com/visible-selector/

Offers insight as to why jQuery behaves this way:

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.