cannot toggle div from radio_buttons

Hi

I have a couple of radio_buttons in my form

<% form_for ... <table> <tr><td> <%= radio_button_tag('contact_type', '1', (@contact_type == "1" ? true : false), {:id => 'ct1', :onclick => "$('contact_by').toggle;"}) -%> Contact 1 <%= radio_button_tag('contact_type', '0', (@contact_type == "0" ? true : false), {:id => 'ct2', :onclick => "$('contact_by').toggle;"}) -%> Contact 0 </td></tr>

and I try to toggle the display of a specific div, using :onclick (1st radio hide, 2nd radio display) the div but i cannot get it right (tried various solution with js, but without any success..)

<tr><td> <div id="contact_by" style="display:none;"> <p>contacted by ... textfield to be inserted there</p> </div </td></tr> </table> div class="buttons"> <input class="button"... submit button area... </div>

<% end %>

need some help .. thanks a lot

Not sure if you've got a typo there or not, but toggle is a js function so you'll need parens:

:onclick=>"$('contact_by').toggle();"

http://prototypejs.org/api/element/toggle

Just a word of warning... since you have two different elements calling toggle via onclick, you may have a different user experience than you expect. Specifically, clicking the first radio button twice you will toggle the div visible and then invisible. You will have more consistent results if you use hide() and appear() explicitly.

thanks alot.. (yes.. I forgot the () js function... ) I'll do a try, with appear and hide (or show hide ?)

Unfortunatly, even with $('mydiv').show() and $('mydiv').hide() , it doesn't work 1- the div is displayed in a glance then hidden 2- the radio button doesn't switch at all...

Any chance that you have a css class on the div that is also setting it to display:none? Prototype cannot override that.