Saving space with DOM element in a form?

[Glenn]

I've created this but it has more options so I narrowed it down for an example. My problem is, I need to cut down the space created by all of the hidden form inputs. How can I do this? If I have 10 options, there is a bunch of blank space there before the next input. Not to mention, if they choose the 10th choice, they may not even see that anything has popped up. Is there a way to change all of that?

Here's what I have....



<script type="text/javascript">
function selectevent(){

if(this.value == "choice1")
document.getElementById( "dv3").style.visibility = "hidden";
if(this.value == "choice1")
document.getElementById( "dv2").style.visibility = "hidden";
if(this.value == "choice1")
document.getElementById( "dv1").style.visibility = "visible";

if(this.value == "choice2")
document.getElementById( "dv2").style.visibility = "visible";
if(this.value == "choice2")
document.getElementById( "dv1").style.visibility = "hidden";
if(this.value == "choice2")
document.getElementById( "dv3").style.visibility = "hidden";

if(this.value == "choice2")
document.getElementById( "dv3").style.visibility = "visible";
if(this.value == "choice2")
document.getElementById( "dv2").style.visibility = "hidden";
if(this.value == "choice2")
document.getElementById( "dv1").style.visibility = "hidden";

}
</script>


Event:

<select name="event" id="sel1">
<option value="">Select...</option>
<option value="choice1">choice1</option>
<option value="choice2">choice2</option>
<option value="choice3">choice3</option>
</select>

<div id="dv1" style="visibility: hidden">
1:
<input type="varchar" id="txt1" name="choice1">
</div>

<div id="dv2" style="visibility: hidden">
2:
<input type="varchar" id="txt2" name="choice2">
</div>

<div id="dv3" style="visibility: hidden">
3:
<input type="varchar" id="txt3" name="choice3">
</div>


<script type="text/javascript">
document.getElementById( "sel1").onchange = selectevent;

</script>

[TheGAME1264]

You want display: none instead of visibility: hidden.

The difference between the two is that visibility: hidden just hides the element, whereas display: none takes it out of the flow of the document completely (much as if you set width and height to 0 for that element).