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?