jQuery hide element while preserving its space in page layout

Question

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 mo

Answer 1

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

Answer 2

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?

Answer 3

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.

Answer 4

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.

Answer 5

Try setting the visibility to hidden:

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