303

I'm using visibility:hidden to hide certain elements, but they still take up space on the page while hidden.

How can I make them totally disappear visually, as though they are not in the DOM at all (but without actually removing them from the DOM)?

Vini.g.fer
  • 11,639
  • 16
  • 61
  • 90
ripper234
  • 222,824
  • 274
  • 634
  • 905
  • 1
    This question is very dead, but I'm adding a comment because I recently found myself in a situation that others might experience. I needed to hide an element and **have it retain its `offsetTop`**, and `display:none` would set the `offsetTop` to 0. My solution here was to use `visibility: hidden` then set the width and height to 0. Once I needed to make the element visible again, I removed the three attributes using Javascript. A bit of a hacky solution, but it works well for pretty much all use cases. – rappatic Dec 14 '19 at 18:32

17 Answers17

379

Try setting display:none to hide and set display:block to show.

Huusom
  • 5,654
  • 1
  • 17
  • 15
  • 3
    its not possible to remove element from dom man. by using this option also. read the question – Pranay Rana May 28 '10 at 11:58
  • 36
    not all items should be `display: block`, some will have to be set to `display: inline` (such as `` or `` or `` DOM elements). – Mauro May 28 '10 at 12:00
  • 4
    @pranay the question says to hide them not to remove them from the DOM. – Mauro May 28 '10 at 12:00
  • 8
    @pranay: The question is not very well expressed but Huusom is solving the problem the user is having. – Claudio Redi May 28 '10 at 12:03
  • 1
    @ripper234: sorry. Didn't mean to be rude :-(. I tried to say that your idea seemed to be hiding the element and avoid taking the space. You didn't care if the element was removed or not of the DOM. – Claudio Redi May 28 '10 at 12:25
  • @Claudio - no offence taken :) Cheers. – ripper234 May 28 '10 at 20:37
  • And using this property you also cause flickering on iOS Safari ..... it's better to use `visibility` in combination with something else – Roland Jul 30 '13 at 12:03
  • 1
    An improvement: create a CSS class called `hidden` with `display: none`. Add the class to an element to hide it, remove it show. When removing it, the `display` property is restored to the element default. – Alejandro C De Baca Mar 16 '18 at 20:42
  • A problem with this solution is that when using `nth-of-type`, given element will still be there resulting in difficulty when making use of this CSS feature in some cases. – Barrosy Sep 18 '19 at 06:55
50

use style instead like

<div style="display:none;"></div>
Salil
  • 46,566
  • 21
  • 122
  • 156
34

Toggling display does not allow for smooth CSS transitions. Instead toggle both the visibility and the max-height.

visibility: hidden;
max-height: 0;
Irfan434
  • 1,463
  • 14
  • 19
  • 2
    This is useful when you working with animations. Because we are hiding the element outside visible area using something like `transform: translateX(-100%)`. We do not want `display: none` – zhuhang.jasper Jun 25 '20 at 05:42
  • 2
    This should be the accepted answer since it does not remove from the DOM, as requested. – Kildareflare Sep 06 '22 at 21:05
29

Look, instead of using visibility: hidden; use display: none;. The first option will hide but still takes space and the second option will hide and doesn't take any space.

alejnavab
  • 1,136
  • 1
  • 12
  • 30
28

To use display:none is a good option just to removing an element BUT it will be also removed for screenreaders. There are also discussions if it effects SEO. There's a good, short article on that topic on A List Apart

If you really just want hide and not remove an element, better use:

div {
  position: absolute; 
  left: -999em;
}

Like this it can be also read by screen readers.

The only disadvantage of this method is, that this DIV is actually rendered and it might effect the performance, especially on mobile phones.

alboth - undkonsorten.com
  • 565
  • 5
  • 4
  • 2
    if you choose to position something absolute you can in most cases run with `visibility: hidden;`, lets say you have other absolute elements they will not have a conflict for the space, just conflict of `z-index`. Just for hiding an element I would go with `visibility` – Dejan.S Nov 24 '16 at 09:27
11

display: none is solution, That's completely hides elements with its space.

Story about display:none and visibility: hidden

visibility:hidden means the tag is not visible, but space is allocated for it on the page.

display:none means completely hides elements with its space. (although you can still interact with it through the DOM)

Community
  • 1
  • 1
Hidayt Rahman
  • 2,490
  • 26
  • 32
9

The answer to this question is saying to use display:none and display:block, but this does not help for someone who is trying to use css transitions to show and hide content using the visibility property.

This also drove me crazy, because using display kills any css transitions.

One solution is to add this to the class that's using visibility: 

overflow:hidden

For this to work is does depend on the layout, but it should keep the empty content within the div it resides in.

Omar
  • 786
  • 3
  • 13
  • 34
  • 4
    If you play with visibility:hidden and visibility:visible and set your element position:fixed you won't have that problem, it's like magic – John Balvin Arias Jun 11 '18 at 20:58
5

display:none to hide and set display:block to show.

Pranay Rana
  • 175,020
  • 35
  • 237
  • 263
  • 2
    He asks about removing it visually, "as though they are not in the DOM". Not about removing them from the actual DOM. – Arve Systad May 28 '10 at 11:57
  • question states not to remove them from the DOM only to make them disappear. `as though they are not in the DOM at all (but without actually removing them from the DOM)` – Mauro May 28 '10 at 12:01
  • @pranay: `visibility: hidden` only stops the display of content but still uses vertical/horizontal space, display:none removes the vertical/horizontal space for the element. – Mauro May 28 '10 at 12:02
  • No it doesn't. visibility: hidden; makes the element invisible, but it still takes up space. display: none; makes the document behave as if it was never there. – Olly Hodgson May 28 '10 at 12:03
2

here's a different take on putting them back after display:none. don't use display:block/inline etc. Instead (if using javascript) set css property display to '' (i.e. blank)

Anurag Priyadarshi
  • 1,113
  • 9
  • 17
1
$('#abc').css({"display":"none"});

this hides the content and also does not leave empty space.

goto
  • 7,908
  • 10
  • 48
  • 58
SanH
  • 19
  • 2
1

above my knowledge it is possible in 4 ways

  1. HTML<button style="display:none;"></button>
  2. CSS #buttonId{ display:none; }
  3. jQuery $('#buttonId').prop('display':'none'); & $("#buttonId").css('opacity', 0);
Ananda G
  • 2,389
  • 23
  • 39
1

display:none is the best thing to avoid takeup white space on the page

Gil
  • 109
  • 1
  • 1
  • 8
1

Thanks to this question. I wanted the exact opposite, i.e a hidden div should still occupy its space on the browser. So, I used visibility: hidden instead of display: none.

Binita Bharati
  • 5,239
  • 1
  • 43
  • 24
1

As I have been troubleshooting this issue and researching, I thought I'd share my insight. If you've gotten yourself to this page, I assume you are trying to figure out why your element is taking up space on your page even with style.display = "none".

Most likely, the reason for this is NOT the element in question; but a child, parent, or sibling of it. Open up your console and go to the Elements tab. Look in there for clues as to what could possibly be taking up space. Maybe you're using a template-engine and didn't realize a <br> was rendering outside of a dynamic <div>. Or maybe you should be targeting a more nested element. Try to think along these lines while troubleshooting.

Hugobop
  • 125
  • 10
  • Brilliant! I was hiding an item in a list but I overlooked the fact that each item in the list was followed by a
    .     – Steve A Jun 14 '23 at 01:08
0

If somehow all the other options to hide an element do not suit you, there is another option which I do not see mentioned. It works assuming the element has no children.

It will hide an element without occupying space:

display: contents;

Check the browser support as it is a newish CSS feature.

Rui Marques
  • 8,567
  • 3
  • 60
  • 91
0

With visibility set to hidden the only way I know of to make it not take up space is to use position:absolute and then set the top, left, etc., parameters. It's not ideal but it works.

Mike K
  • 1,313
  • 2
  • 18
  • 28
-1

if display: none; doesn't work you have to add clear: none;

Jasper Abaricia
  • 21
  • 7