CODEWITHSUNDEEP
javascriptjqueryvisibility
isayno
isayno

Reputation: 755

Why does jQuery show/hide use display:none instead of visibility:hidden?

display:none means that the element isn't rendered as part of the DOM, so it's not loaded until the display property changes to something else.

visibility:hidden loads the element, but does not show it.

Why does jQuery use display:none for its show/hide functions instead of switching between visibility:hidden and visibility:visible?

Upvotes: 71

Views: 28110

Answers (5)

Salty
Salty

Reputation: 6688

Because in display:none, the element, for all purposes, ceases to exist -- it doesn't occupy any space. However, in visibility:hidden, it's as if you had just added opacity:0 to the element -- it occupies the same amount of space but just acts invisible.

The jQuery creators probably thought the former would be a better fit for .hide().

Upvotes: 65

anil kumar
anil kumar

Reputation: 151

Visibility:hidden just make the element invisible but it is loaded in DOM so it consumes load time. But Display:none does not load the element.

Upvotes: 1

John Kugelman
John Kugelman

Reputation: 361879

visibility: hidden makes an element invisible but does not remove it from the layout of the page. It leaves an empty box where the element was. display: none removes it from the layout so it doesn't take up any space on the page, which is usually what people want when they hide something.

Upvotes: 18

Seph
Seph

Reputation: 328

Visibility just makes the element invisible, but it would still take up space on the screen.

Upvotes: 6

user142019
user142019

Reputation:

Visibility:hidden makes the element invisible in a way that it still uses space at the page. Display:none makes the element have no space and be completely gone, while it still exists in the DOM.

Upvotes: 10

Related Questions