Show/Hide Divs Multiple Radio Buttons JQuery

Question

I'm helping my friend Michaela out for our web design class. She did the HTML, and I've changed just a few of the lines and added some divs. She wants it so if the user clicks on a radio button then the corresponding div is shown. All div's for her form start out hidden in a class "hidden_destiny". -- This going to be a series of nested div's and I may need to change the layout later.

Here's the JsFiddle . Here's my javascript:

if ($('#radio_starwars').is(':checked')){
    $('#clicked_starwars').hide().slideDown('slow');
    $('.hidden_destiny').not('#clicked_starwars').hide().slideUp('slow');
}
else if ($('#radio_avengers').attr('checked', 'true')){}
else if ($('#radio_batman').attr('checked', 'true')){}
else if ($('#radio_xmen').attr('checked', 'true')){}
else if ($('#radio_harryp').attr('checked', 'true')){}
else if ($('#radio_lotr').attr('checked', 'true')){}

[EDIT] Updated code. Add id identifier to code and updated JsFiddle link.

Answer 1

Try this code:

$(":radio").change(function(){
  $(".hidden_destiny").hide()//hide divs
  $("#clicked_"+this.id.replace("radio_","")).show()//show div by radio id
})

http://jsfiddle.net/YZ9fh/

Answer 2

$('.fate').click(function () {
    $('.hidden_destiny').each(function () {
        if ($(this).is(':visible')) {
            $(this).slideUp('slow');
        }
    });
    var id = $(this).val();
    $('#clicked_' + id).slideDown('slow');
});

jsfiddle