DHTML text displacement

Is there a way to make a hidden DIV displace text when it is made visible?

I want to make a page, a huge form really, with a several hidden sections, structured like this:

[main form]
[optional info 1]
[optional info 2]
[optional info 3]
[additional info]
[submit button]

Each of the optional info's is contained in a DIV which is initially hidden, and which can be made visible with a "MORE>>" type javascript button located just before each DIV.

I'd like to be able to hit the "MORE>>" button, and have all of the content below that button slide down the page to make room for the newly revealed DIV (rather than have a big blank spot, or have overlapping content). Is there any way to do this?

Thanks!

You have to set the Display of the DIV to None,like this:

var x=document.getElementById("div_id");
x.style.display="none";


Then to show it ,set Display to nothing:


var x=document.getElementById("div_id");
x.style.display="";

Wonderful! That's just what I'm looking for.

One thing, though: does it only work in IE? If so, are there other solutions for Netscape/Moz users?

Thanks!

It will work on any browser that supports the CSS display property - that includes Netscape 6+ and Mozilla.

If your script doesn't work with those browser, check your code for IE-proprietary statements like "document.all".

Originally posted by BrainJar
It will work on any browser that supports the CSS display property - that includes Netscape 6+ and Mozilla.

If your script doesn't work with those browser, check your code for IE-proprietary statements like "document.all".

Initially setting the display property works in all browsers,but dynamically changing it doesn't work in Opera (as far as I know).It will work with NS6+/Mozilla and Konqueror

That works great! Thanks everybody!