Fade Toggle is not working as expected

Question

I am a total rookie at JS and jQuery.

I have a radio toggle that works when you click one radio button - it displays a set of checkboxes and the other radio button to hide those same checkboxes.

I now would like to use fadeToggle to make it display with a little more finesse.

When I insert "toggle" everything works as expected but when I insert fadeToggle it has no effect (still works but does not have any fade effect).

I have tried various parenthesis and brackets with "slow" and "1000" for timing but I can not seem to locate the correct syntax. Hence, I am not sure how to correct my code to accommodate the fade effect.

If anyone can shed some much needed light, I would greatly appreciate the help.

$(document).ready(function() {
    $("input[name='preferpaiddiavip_cupid']").change(function() {
        $(this).closest('form').find('label');
        $(".include_other_levels").fadeToggle(this.value == "yes");
        $("div.prefer_paid_emerald").hide();
    });
}); 

Answer 1

There's no overload for .fadeToggle(display) in the same way that there is for .toggle(display) (http://api.jquery.com/toggle/#toggle-display).

You'll have to wrap the toggle in an if (and, basically, not use .fadeToggle), eg:

if (this.value == "yes")
    $(".include_other_levels").fadeIn();
else    
    $(".include_other_levels").fadeOut();