Hi. im using <div id> to dynamically change a form so when 1 of 2 radio buttons is selected the user is able to select from a dropdown menu, when the other is selected a message appears and the select box disappears. The problem is that when the page loads the contents of both div options appear on screen until the user selects one of the radio buttons- at this point one of the div options disappears and the required result is achieved. Anybody know how i can change the code so when the page loads only one of the div options appears? here is a simplified version of the form:

[js]
<form action='gethingeinfo2.php' NAME='hingeform' method='post'>
<SCRIPT>
function no() {hinge.style.visibility='visible';
binge.style.visibility='hidden';}
function yes(){binge.style.visibility='visible';
hinge.style.visibility='hidden';}
</SCRIPT>
No Back<input type='radio' name='back' value='No Back' checked='checked' onclick='no(); '>
With Back<input type='radio' name='back' value='With Back' onclick='yes();'>

<DIV ID='hinge' >
<SELECT NAME='hingetype' class='dropDownBoxGrey' ID='hingeask'>
<option value='Inset'><span id='normal'>Inset</span>
<option value='Surface'><span id='normal'>Surface</span>
</select>
</DIV>
<DIV ID='binge' >
you can do back and hinges
<input type='hidden' name='hingetype' value='No Hinges'>
</DIV>
[/js]

thanks for looking.

u can set one of the divs to be hidden and then when the selection is made then you can toggle the visibility..

else.. u can make both of them to be hidden and upon selection make the respective one visible.

since u r using id tags, its easier to do it this way

Job done. Thanks very much

FYI, id tag names should only be used once, to identify one specific object/element. Use a class tag to define multiple items with the same attributes. <span id='normal'> should be <span class='normal'> because there are 2 of them.