show and hide divs based on radio button click

Question

My html and jquery code here. This is a very simple test but it still can't work..

Here is html:

  <p>Select a question to see the answer.</p>
  <div id="questionArea" class="questionArea" >
    Question 1 <input type="radio" id="question1" class="question" name="radioGroup1" />
    Question 2 <input type="radio" id="question2" class="question" name="radioGroup1" />
    Question 3 <input type="radio" id="question3" class="question" name="radioGroup1" />
  </div>

  <div id="answerArea" class="answerArea">
    <div id="answer1" class="answer">First Answer</div>
    <div id="answer2" class="answer">Second Answer</div>
    <div id="answer3" class="answer">Third Answer</div>
  </div>

Here is jquery:

 $(document).ready(function() {
  $(".answerArea").hide();
  $("input[$name='radioGroup1']").click(function() {
            var answer = $(this).val();
            $(".answerArea").hide();
            $("#" + answer).show();
        });
    });
});

Here is another way to show/hide, although it isn't a good approach, but I just want to know why it can't work..

     $(document).ready(function () {

            $("div.answerArea").hide();

                $('#question1').click(function () {
                    $('#answer2').hide('fast');
                    $('#answer3').hide('fast');
                    $('#answer1').show('fast');

                });

                $('#question2').click(function () {

                      $('#answer1').hide('fast');
                      $('#answer3').hide('fast');
                      $('#answer2').show('fast');

                 });

                   $('#question3').click(function () {

                      $('#answer1').hide('fast');
                      $('#answer2').hide('fast');
                      $('#answer3').show('fast');

                 });


    }); 

Answer 1

$(".answerArea").hide(); hides the parent element that contains the answers. You can't show a child if the parent is hidden.

I'd use the index of the children to do it:

$(document).ready(function() {
    $(".answer").hide();

    $(".question").click(function() {
        $(".answer").hide().eq($(this).index()).show();
    });
});

This will hide all of the answer elements and then show the one corresponding to the question.