collapsing space between hidden divs

[D. Alvarado]

Hello

I have 5 divs, and initially the lower 4 are hidden. I would like
everything beneath the 5th div to appear flush against the first
visible div. But right now, there is a gap of white space between the
first visible div, and everything beneath the 5th. Here is this code:

<form name="f">
<div id="Item0">Item 1:<input type="text" size="32" maxlength="32"
name="Name0" id="Name0"></div>
<div style="visibility:hidden" id="Item1">Item: 2<input
type="text" size="32" maxlength="32" name="Name1" id="Name1"></div>
<div style="visibility:hidden" id="Item2">Item: 3<input
type="text" size="32" maxlength="32" name="Name2" id="Name2"></div>
<div style="visibility:hidden" id="Item3">Item: 4<input
type="text" size="32" maxlength="32" name="Name3" id="Name3"></div>
<div style="visibility:hidden" id="Item4">Item: 5<input
type="text" size="32" maxlength="32" name="Name4" id="Name4"></div>
<input type="button" value="Add Another" onClick="add();"
name="AddAnother">
</form>

How can I make the "Add Another" button flush against the first
visible div (i.e. eliminate all the white space between the first div
and the button), and then write a function "add" that sequentially
unhides each of the other divs, moving the "Add Another" button down
as well?

Thanks for all your help, - Dave

[SanJoseWebGuy]

Dave,
Using visibility:hidden will allow a hidden div 'box' to occupy white space in
the html document; whereas, using display:none will render the box not visible
AND not occupy white space. Unless there's some special reason for it, I'd
recommend using display:block (to view) or display:none (to render invisible).
There's also display:inline which will allow visibility. As the attribute
values 'block' and 'inline' imply, they allow the element to exist on it's own
line (block) or on the same line as its preceding elements (inline).

Hope this helps,

Jim

[D. Alvarado]

Thanks! Go Sharks! -

sa***********@aol.com.nospam (SanJoseWebGuy) wrote in message news:<20***************************@mb-m20.aol.com>...

Dave,
Using visibility:hidden will allow a hidden div 'box' to occupy white space in
the html document; whereas, using display:none will render the box not visible
AND not occupy white space. Unless there's some special reason for it, I'd
recommend using display:block (to view) or display:none (to render invisible).
There's also display:inline which will allow visibility. As the attribute
values 'block' and 'inline' imply, they allow the element to exist on it's own
line (block) or on the same line as its preceding elements (inline).

Hope this helps,

Jim