Why can I .hide () but not .show () in jQuery?

Question

HTML:

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

Why can I hide the visible div as follows: http://jsfiddle.net/FfaVW/2/

CSS:

 #box { visibility:visible; }​ 

JS:

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

But I can not show the hidden div as follows: http://jsfiddle.net/FfaVW/1/

CSS:

 #box { visibility:hidden; }​ 

JS:

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

Answer 1

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

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

The display will appear: no, for example.

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

Suggests to understand why jQuery behaves as follows:

Elements with visibility: hidden or opaque: 0 are considered visible because they still consume space in the layout.

Answer 2

jQuery show() and hide() change display .

Display

changes the flow of elements on the screen.

visibility only deals with the fact that you can see it on the screen or not, but it will take up space.

check the difference: http://jsfiddle.net/XS4ca/3/

Answer 3

Do not use visibility CSS for Show and Hide Div .

Instead use Div Hide with Css use Display:none and for the Show Displan:Block

Show the following links For example:

http://jsfiddle.net/FfaVW/7/

http://jsfiddle.net/FfaVW/8/

Hope this helps you.