Laden, I hope this helps you...
Put this javascript into the head of your html
Code:
<script type="text/javascript">
function ShowDiv(divName) {
HideDivs();
if (document.all) {
document.all.text1.style.visibility = "visible";
} else {
document.getElementById(divName).style.visibility = "visible"; }
}
function HideDivs() {
if (document.all) {
document.all.text1.style.visibility = "hidden";
document.all.text2.style.visibility = "hidden"; document.all.text3.style.visibility = "hidden";
} else {
document.getElementById('text1').style.visibility = "hidden";
document.getElementById('text2').style.visibility = "hidden";
document.getElementById('text3').style.visibility = "hidden"; }
}
</script>
The rest you put into the body of the html
Code:
<form name="form1" method="post" action="">
<input type="radio" onChange="ShowDiv('text1')" name="radiobutton" value="radiobutton" checked> text 1
<input type="radio" onChange="ShowDiv('text2')" name="radiobutton" value="radiobutton"> text 2
<input type="radio" onChange="ShowDiv('text3')" name="radiobutton" value="radiobutton"> text 3
</form>
<br />
<div id="text containter" style='width:420; height:85px; background:silver; position: absolute; '>
<div id='text1' style="position:absolute; left:5px; top:10px">
<font color='#0000FF'>I want to create a form on my website that has 3 radio buttons </font>
</div>
<div id='text2' style='position:absolute; left:5px; top:10px; visibility:hidden;'>
<font color='#0000FF'>and when someone clicks on each radio button, a different text paragraph appears.</font>
</div>
<div id='text3' style='position:absolute; left:5px; top:10px; visibility:hidden;'>
<font color='#0000FF'>So do you know how I can do this using Javascript?</font>
</div>
</div>
I hope you know a little about programming. With this you can easily customize it.
I have put up a demo page with this in action at
http://haidavision.no-ip.info/gannya...s/showhide.htm