Simple Javascript (Probably) - How To Hide (Collapse) Elements

[Dom]

Hi all,

Simple Javascript issue, but as I don't use Javascript so much I thought I'd ask here.

I've got some <div> elements on my page that divide up my content into sections (as you might expect) and I've got some Javascript that shows/hides the <div> elements using code similar to the following:

Code:

document.getElementById("some-div-element").style.visibility = "hidden";

This works and all, but although it hides the element, it leaves a bloody great gap where the content used to be. So if I have multiple sections hidden in the middle of the page, there's just a load of whitespace where the <div> elements used to be.

So my question - when you hide elements, how do you "collapse" them so that when they're hidden, they don't still take up lots of space on the page?

I'm using IE for this, so it only needs to work for IE. Thanks!

[Jem]

http://girlswhogeek.com/tutorials/2007/show-and-hide-elements-with-javascript

[Dom]

I'm torn. On the one hand, I'm glad there's an answer to my problem, but on the other hand, I'm not sure I want to have "girls who geek" showing up in my web history at work.

Seriously, though, thanks for the help (and shameless self-promotion... I like it!)

[Dom]

EDIT: What a ninny - it does work. I changed the code, then didn't save the page before refreshing it in IE. #FoolishBoy

Uh oh, spagettio - it doesn't work.

It hides the elements OK, but it's still leaving whitespace where the "hidden" <div> elements are.

[Jem]

Then you probably have a height set on your hidden div or something like that. Need more code.

Edit: didn't see your edit

[Dom]

Yeah it's all good now, ta!