Toggle DIV visibility based on radio button selection

mylove_2100

New Member
I'm still finding my way around Javascript at the moment, so apologies if I'm missing something really obvious with this (likely!).I have a small form with a number of radio buttons, like so;\[code\]<input type="radio" name="dtype" id="dtype" value="http://stackoverflow.com/questions/15867345/option1"><input type="radio" name="dtype" id="dtype" value="http://stackoverflow.com/questions/15867345/option2"><input type="radio" name="dtype" id="dtype" value="http://stackoverflow.com/questions/15867345/option3"><input type="radio" name="dtype" id="dtype" value="http://stackoverflow.com/questions/15867345/option4">\[/code\]Based on the user's selection, I need to immediately show the relevant div. I have this working fine for the first radio, but not for any subsequent ones (and no errors reported in firebug). This is what I have right now;\[code\]<script type="text/javascript">$(function() {$('#dtype').change(function() {if($(this).val() == 'option1') {$('#div1').slideToggle('500');}if($(this).val() == 'option2') {$('#div2').slideToggle('500');} if($(this).val() == 'option3') {$('#div3').slideToggle('500');}if($(this).val() == 'option4') {$('#div4').slideToggle('500');}});});</script>\[/code\]I also tried 'else if' on the 3 after the first, without success. Pointers welcome!
 
Back
Top