Hide/Show using JavaScript

Saturday, April 19th, 2014 javascript, PHP

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.

Leave a comment

Request a Free SEO Quote