Hide some divs (it won't take space)

Question

I have 5 divs. Each time I want only one of them to be shown in the middle of the screen. The problem is that the hidden divs takes space. Each div contain a lot of information so I don't want to create it each time I need to show it.

I simply used: visibility="visible" or visibility="hidden".

Are there other possibilities?

See [What is the difference between visibility:hidden and display:none?](http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) — Alex K., May 09 '13 at 13:57

andyb · Accepted Answer · 2013-05-09T14:07:09.027

3

You need to use display:none to hide an element completely from the layout instead, which is documented as:

none - This value causes an element to not appear in the document. It has no effect on layout.

visibility:hidden will leave an invisible box, which is the problem you are encountering. From the documentation:

hidden - The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.

The default CSS display value for a <div> is display:block, so to show the <div> again, just set the element back to display:block. Note that there are other values for display, so take care to set it back to it's original value (which might not necessarily be the default value).

edited May 09 '13 at 14:07

answered May 09 '13 at 13:56

andyb

43,435
12
121
150

2

...and `display:block` instead of `visibility="visible"` – George Cummins May 09 '13 at 13:58
My problem in addition to "display: none" was that I had to do it to all internal divs (not the outside). – user2004403 May 09 '13 at 14:34
Could you wrap the internal `
`s in another `
` and change the display of that instead?
– andyb May 09 '13 at 14:37

score 0 · Answer 2 · answered May 09 '13 at 13:57

0

use display:none if you use css or .hide() if you use jquery

answered May 09 '13 at 13:57

Johnny000

2,058
5
30
59

score 0 · Answer 3 · answered May 09 '13 at 13:57

0

I would normally just use the jquery 'hide' method. This should hide the div's without them taking up any space on the screen.

answered May 09 '13 at 13:57

SteveP

18,840
9
47
60

Adil Shaikh · Answer 4 · 2013-05-09T14:13:23.953

0

Even invisible elements take up space on the page. Use the display property to create invisible elements that do not take up space.

display:none;

Read this for more info --> https://developer.mozilla.org/en-US/docs/CSS/display

edited May 09 '13 at 14:13

answered May 09 '13 at 13:57

Adil Shaikh

44,509
17
89
111

Hide some divs (it won't take space)

4 Answers4