Question

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" /> Yes
    <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?

Answer 1

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