Hide/Show using JavaScript
To hide the Div : style=”display:none”;
To visible the Div : style=”display:block”;
[php]
<html><head><script type="text/javascript">
function showdiv()
{
if(document.getElementById(‘child’).checked)
{
document.getElementById(‘adu’).style.display = "block";
}
else
{
document.getElementById(‘adu’).style.display = "none";
}
if(document.getElementById(‘adult’).checked)
{
document.getElementById(‘adu’).style.display = "none";
}
}
</script>
</head>
<table border="0">
<tbody>
<tr>
<td>Member Type</td>
<td>
<input id="adult" onclick="showdiv();" type="radio" name="member" value="Adult" />
<input id="child" onclick="showdiv();" type="radio" name="member" value="Child" /></td>
</tr>
<div id="adu" style="display:none">
<tr><td>Name</td><td><input type="text" value=""></td></tr>
</div>
</tbody>
</table>
</html>
[/php]
Output:
When you Click the Adult , you will not see the text box below.
When you click the child, the below text box will be visible.
| Member Type | Adult Child |
| Name | * |
No comments yet.