Using JQuery and 3 Radio Buttons to Reveal/Expand Different HTML

I need help to extend a jquery script on this page to create a set of three radio buttons that each reveal/expand different html when selected.

The tutorial and supplied script in the above linked page are written for a set of two radio buttons. Here's the tutorial's html example of a set of two radio buttons, "Yes" and "No", which when No is selected reveals the html of id='parent2':

//Example 2: Display Fields Based On Selected Radio Button With jQuery Cookie
<fieldset></p>
<ol class="formset">
        <li><label for="fname2">First Name: </label>
    <input type="text" id="fname2" value="" name="fname2"/></li>
        <li><label for="lname2">Last Name: </label><br />
    <input type="text" id="lname2" value="" name="lname2"/></li>
        <li><label for="email2">Email Address: </label><br />
    <input type="text" id="email2" value="" name="email2" /></li>
        <li><label for="age2">Are you above 21 yrs old?</label><br />
    <input type="radio" name="age2" value="Yes" class="aboveage2" /> Y开发者_如何学Ces
    <input type="radio" name="age2" value="No" class="aboveage2" /> No</li>
</ol>
<ol id="parent2" class="formset">
        <li><strong>Parent/Guardian Information:</strong></li>
        <li><label for="pname2">Parent Name: </label>
    <input type="text" id="pname2" value="" name="pname2"/></li>
        <li><label for="contact2">Contact No.: </label><br />
    <input type="text" id="contact2" value="" name="contact2"/></li>
</ol>
<input type="submit" name="submit" value="Submit" class="submitbtn" />
</fieldset>

And here's the jquery that hides and reveals/expands the html in 'parent2' and writes the expanded or collapsed state of parent2 in a cookie (for when the form is reloaded).

$(document).ready(function(){
    $("#parent2").css("display","none");
        $(".aboveage2").click(function(){
        if ($('input[name=age2]:checked').val() == "No" ) {
            $("#parent2").slideDown("fast"); //Slide Down Effect
            $.cookie('showTop', 'expanded'); //Add cookie 'ShowTop'
        } else {
            $("#parent2").slideUp("fast");  //Slide Up Effect
            $.cookie('showTop', 'collapsed'); //Add cookie 'ShowTop'
        }
     });
        var showTop = $.cookie('showTop');
        if (showTop == 'expanded') {
        $("#parent2").show("fast");
        $('input[name=age2]:checked');
      } else {
        $("#parent2").hide("fast");
        $('input[name=age2]:checked');
      }
});

My problem is trying to use a set of three radio buttons, for example with options "Yes", "Maybe", and "No", each revealing different html when clicked (and hiding the previously selected option's html, if there were one).

My solution was to try to use an if, else if, else statement that wrapped the existing if, else statements similar to the code from the tutorial above. But this isn't the right way of solving this problem or I'm incorrectly using the statement syntax.

Can someone please suggest the correct way?

Does this do what you want: http://jsfiddle.net/8p7J2/2/

There are so many ways to do this... and it's hard to say any one way is "right"... but I can give you one small, succinct possibility:

First, check out the running example I put together on jsfiddle.net: http://jsfiddle.net/hPPqc/

Markup:

<div><input type='radio' name='opt' value='1' /> Option 1</div>
<div><input type='radio' name='opt' value='2' /> Option 2</div>
<div><input type='radio' name='opt' value='3' /> Option 3</div>
<div class='info' id='info1'>Option 1 Info</div>
<div class='info' id='info2'>Option 2 Info</div>
<div class='info' id='info3'>Option 3 Info</div>

Javascript:

var update = function() {
    $(".info").hide();
    $("#info" + $(this).val()).show();
};

$("input[type='radio']").change(update);

Css:

.info { display: none; }

Explaination:

Here we have a couple radios, each with an associated "info" div.

To associate each radio with each info box, I decided to make the radio's value part of the associated info box's name (radio with value='1' is associated with an info box with name "info1")

This, obviously, could be done any number of ways... including a custom attribute on the div, by hand, etc, etc.

I hide all of the info boxes by default by giving them all a class ("info") which specifies "display: none" in the css.

Finally, I hook up a standard on change to all of my radios with the javascript. This method re-hides all "info" boxes, and specifically shows the one I want, based on the selected radio's value.

If you need anything else, please let me know.

Thanks