jQuery hide element while preserving its space in page layout

Is there a way in jQuery whe开发者_Python百科re 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?

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.

Try setting the visibility to hidden:

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

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.

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

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?