jQuery hide element while preserving its space in page layout
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.
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
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.
Try setting the visibility
to hidden
:
$("#id").css("visibility", "hidden");