Show/Hide divs on radio selection

Question

I have 3 divs that contain radio with labels and beneath each radio button I would like to show/hide a form based on whether the radio is selected or not.

Code idea:

<div id="radio1"></div>
<div id="form1"></div>

<div id="radio2"></div>
<div id="form2"></div>

<div id="radio3"></div>
<div id="form3"></div>

Using prototype does anyone have any basic idea or suggestion on the best way to accomplish this. Any suggested scripts or links would be greatly appreciated. I am a newbie to prototype and having a hard time grasping the concept or finding anything helpful online. In theory I wouldn't think this would be too complicated but thanks in advance for any help.

Answer 1

Use this pattern:

<div onclick="$('form1').toggle()" id="radio1"></div>
<div id="form1" style="display"none"></div>

You can chain these together to control other elements as well:

<div onclick="$('form1').toggle();$('form2').hide();$('form3').hide()" id="radio1"></div>
<div id="form1" style="display"none"></div>

There are better ways to do this, such as selecting all of the elements that have the same class, hiding them, then showing the clicked element. But from a beginner's point of view, this should do what you want.