Question

I have a script that I found somewhere online that shows or hides divs based on radio button clicks.

I am trying to improve this by adding either fadeToggle() or slideToggle() to the transition. However when I do this the function does not work like it used to.
It shows both divs and hides them both again when I click the other radio button.

// Show/Hide forms based on radio button selection
$('input[name="screen_type"]').bind('change',function(){
var showOrHide = ($(this).val() == 2) ? true : false;
$('.welcome_screen').toggle(showOrHide);
    var showOrHide = ($(this).val() == 1) ? true : false;
$('.training_screen').toggle(showOrHide);
});

Please see the fiddle here
http://jsfiddle.net/clintongreen/JEbFq/

Thanks for all the help guys, cheers

Answer 1

fadeToggle and slideToggle don’t take the parameter to show or hide api doc

Here’s a quick and dirty way to do it instead: http://jsfiddle.net/hzSnU/1/