CODEWITHSUNDEEP
jqueryhtmlcss
Yarin
Yarin

Reputation: 183729

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

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();​

Upvotes: 4

Views: 248

Answers (3)

Rony SP
Rony SP

Reputation: 2628

Dont Use visibility CSS for Show and Hide Div.

Instead Use Div Hide using Css you use Display:none and For Show use Displan:Block

Show Following Links For example:

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

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

Hope this is helpful for you.

Upvotes: 0

user900360
user900360

Reputation:

jQuery show() and hide() alter the display.

display modifies the flow of the elements on the screen.

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

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

Upvotes: 0

Corbin
Corbin

Reputation: 33457

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.

Upvotes: 3

Related Questions