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

 

[D. Alvarado]

Thanks! Go Sharks! -