Problem
Is there a way to hide an element in jQuery without changing the DOM while it’s hidden? I’m concealing one element, but the elements below it shift up when it’s hidden. That is something I do not want to happen. I want the space to stay the same, but the element to be shown/hidden at will.
Is it possible for me to achieve this?
Asked by slandau
Solution #1
Use instead of hide():
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.
The setting visibility:hidden maintains the current state of the space.
Answered by Dr.Molle
Solution #2
Set the visibility to hidden and see if that helps:
$("#id").css("visibility", "hidden");
Answered by Chad Levy
Solution #3
display: none; will remove it from the content flow, allowing your other material to fill in the empty area. (display: block; returns it to the flow, pushing everything else aside.)
concealed; it will remain within the content flow, using up space, but it will be invisible. (visibility: visible; it will be revealed once more.)
If you want your content flow to stay the same, you’ll want to use visibility.
Answered by Sparky
Solution #4
It is mentioned in another answer that jQuery’s fadeTo does not set display: Instead of utilizing fadeOut, for example, none on completion might alternatively provide a solution:
Using jQuery, you may hide a div without affecting the rest of the page.
Answered by lunelson
Solution #5
Before I discovered the visibility: hidden method, I used opacity: 0.
However, opacity: 0 is problematic in many circumstances because it allows you to interact with the element even if you can’t see it! (As DeadPassive pointed out.)
That’s usually not what you desire. But what if you did it once in a while?
Answered by joeytwiddle
Post is based on https://stackoverflow.com/questions/6393632/jquery-hide-element-while-preserving-its-space-in-page-layout