175

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 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?

Brad Mace
  • 27,194
  • 17
  • 102
  • 148
slandau
  • 23,528
  • 42
  • 122
  • 184
  • how about giving it zero width? – mrtsherman Jun 18 '11 at 03:20
  • 9
    @mrtsherman: zero width is discouraged: many screen-readers (as used by users who are blind or who have low vision) will still read out content that is 'hidden' in this way, which may confuse them as presumably the content isn't supposed to be available at this point in time. Using css visibility:hidden is the way to go here. – BrendanMcK Jun 18 '11 at 03:29
  • You can save the height dynamically before fadeIn and fadeOut your elems => see downstairs (I'm using it in a products loop.) $('.or-woo-bt').parent().parent().parent().hover(function() { // Preserve space; var rightHeight = $(this).height(); $(this).css('height', rightHeight); // Hide; $(this).parent().parent().find('a span.family-price').fadeOut(); }, function() { // Show; $(this).parent().parent().find('a span.family-price').fadeIn('slow'); }); – Olivier Feb 16 '19 at 00:40

5 Answers5

306

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.

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
41

Try setting the visibility to hidden:

$("#id").css("visibility", "hidden");
Chad Levy
  • 10,032
  • 7
  • 41
  • 69
20

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.

Sparky
  • 98,165
  • 25
  • 199
  • 285
15

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

Community
  • 1
  • 1
lunelson
  • 561
  • 6
  • 11
7

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?

joeytwiddle
  • 29,306
  • 13
  • 121
  • 110
  • 1
    You can't interact with a hidden element, while you can with an element with 0 opacity. – DeadPassive Jan 19 '16 at 11:49
  • @feskr If you can think of a situation where it would be advantageous, please do share! – joeytwiddle Feb 12 '16 at 06:08
  • @joeytwiddle I stumbled upon you answer. I needed to prevent interaction with an element in a certain state, while preserving it's space. I was aware of the fact that visibility: hidden would preserve space, but didn't know it would prevent interaction. – feskr Feb 17 '16 at 09:56