469,639 Members | 1,577 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,639 developers. It's quick & easy.

collapsing space between hidden divs

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
Jul 23 '05 #1
2 2397
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
Jul 23 '05 #2
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

Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

13 posts views Thread by Aaron | last post: by
4 posts views Thread by Jeremy Epstein | last post: by
4 posts views Thread by Nigel Molesworth | last post: by
3 posts views Thread by Odo | last post: by
10 posts views Thread by web_design | last post: by
4 posts views Thread by Andreas Prilop | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.