CODEWITHSUNDEEP
javascriptjquerycsshtmlshow-hide
user2004403
user2004403

Reputation: 233

Hide some divs (it won't take space)

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?

Upvotes: 0

Views: 235

Answers (4)

Adil Shaikh
Adil Shaikh

Reputation: 44740

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

Upvotes: 0

andyb
andyb

Reputation: 43823

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).

Upvotes: 3

SteveP
SteveP

Reputation: 19093

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

Upvotes: 0

Johnny000
Johnny000

Reputation: 2104

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

Upvotes: 0

Related Questions