View Single Post
Old 01-21-2007, 08:35 AM   #4 (permalink)
Gannyaa
Member
 
Join Date: 12-07-06
Location: Nelson
Posts: 62
iTrader: 0 / 0%
Latest Blog:
None

Gannyaa is a jewel in the roughGannyaa is a jewel in the roughGannyaa is a jewel in the roughGannyaa is a jewel in the roughGannyaa is a jewel in the roughGannyaa is a jewel in the rough
Post Show Hide Div's with Radio Buttons

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
Gannyaa is offline   Reply With Quote