This is what I have:
<script type="text/javascript">
function toggle(value){
if(value=='show') { document.getElementById('busblock').style.display='block'; }
else { document.getElementById('busblock').style.display='none'; }
}
</script>
<script type="text/javascript">
function toggle(value){
if(value=='show') { document.getElementById('guyblock').style.display='block'; }
else { document.getElementById('guyblock').style.display='none'; }
}
</script>
</head>
<body>
<form action="http://qa.onlinelabtests.com/guestlist.php" method="post">
First Name: <input type="text" name="fname" /> <br />
Last Name: <input type="text" name="lname" /> <br />
E-mail: <input type="email" name="email" /> <br />
Gender: <br />
<input type="radio" name="gender" value="male" onclick="toggle('show');"> Male <br />
<input type="radio" name="gender" value="female" onclick="toggle('hide');"> Female <br />
<div id="guyblock" style="display:none">
Referred By
<select name="tke">
<option value="915">Cameron</option>
<option value="930">Edgar</option>
<option value="950">JD</option>
<option value="1010">Estaban</option>
</select>
</div>
<div>
Bus Transportation <br />
<input name="bus" type="radio" value="yes" onclick="toggle('show');"> Yes<br />
<input name="bus" type="radio" value="no" onclick="toggle('hide');"> No<br />
</div>
<div id="busblock" style="display:none">
Bus Time
<select name="departtime">
<option value="915">9:15PM</option>
<option value="930">9:30PM</option>
<option value="950">9:50PM</option>
<option value="1010">10:10PM</option>
</select>
</div>
<input type="submit" value="Register" />
</form>
But only one at a time works (if both female and yes to bus is selected, it hides the first one)
Thanks!
You need two different function names, as declaring the second one will overwrite the first. Change the name to something more declarative (say,
toggleGender) See my change here.