CODEWITHSUNDEEP
jqueryhtml
slandau
slandau

Reputation: 24052

jQuery hide element while preserving its space in page layout

Is there a way in jQuery where I can hide an element, but not change the DOM when it's hidden? I'm hiding a certain element but when it's hidden, the elements below it move up. I don't want that to happen. I want the space to stay the same, but the element to be shown/hidden at will.

Can I do this?

Upvotes: 178

Views: 96398

Answers (5)

joeytwiddle
joeytwiddle

Reputation: 31265

I previously used opacity: 0 before I saw the visibility: hidden trick.

But in many cases opacity: 0 is problematic, because it lets you interact with the element, even though you can't see it! (As pointed out by DeadPassive.)

Usually that's not what you want. But perhaps occasionally you might?

Upvotes: 7

lunelson
lunelson

Reputation: 571

in another answer it is noted that jQuery's fadeTo does not set display:none on completion so might also provide a solution here, rather than using fadeOut for example:

jQuery, hide a div without disturbing the rest of the page

Upvotes: 15

Dr.Molle
Dr.Molle

Reputation: 117324

Instead of hide(), use:

css('visibility','hidden')

hide() sets the display style to none, which completely removes the element from the document flow and causes it to not take up space.

visibility:hidden keeps the space as it is.

Upvotes: 309

Sparky
Sparky

Reputation: 98728

display: none; will take it out of the content flow so you'll see your other content move into the empty space left behind. (display: block; brings it back into the flow pushing everything out of the way.)

visibility: hidden; will keep it within the content flow taking up space but simply make it invisible. (visibility: visible; will reveal it again.)

You'll want to use visibility if you want your content flow to remain unchanged.

Upvotes: 20

Chad Levy
Chad Levy

Reputation: 10140

Try setting the visibility to hidden:

$("#id").css("visibility", "hidden");

Upvotes: 42

Related Questions