<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
$("#parent2, #parent3").css("display","none");
$(".aboveage2").click(function(){
if ($('input[name=age2]:checked').val() == "Yes"){
$("#parent3").slideUp("fast"); // HIDE
$("#parent2").slideUp("fast"); // HIDE
$("#parent0").slideDown("fast"); // SHOW
$.cookie('showTop', 'collapsed'); //Add cookie 'ShowTop'
}
if ($('input[name=age2]:checked').val() == "No") {
$("#parent2").slideDown("fast"); // SHOW
$("#parent3").slideUp("fast"); // HIDE
$("#parent0").slideUp("fast"); // HIDE
$.cookie('showTop', 'expanded'); //Add cookie 'ShowTop'
}
if ($('input[name=age2]:checked').val() == "Maybe") {
$("#parent3").slideDown("fast"); // SHOW
$("#parent2").slideUp("fast"); // HIDE
$("#parent0").slideUp("fast"); // HIDE
$.cookie('showTop', 'expanded3'); //Add cookie 'ShowTop'
}
});
var showTop = $.cookie('showTop');
if (showTop == 'expanded') {
$("#parent2").show("fast");
$("#parent0").hide("fast");
$('input[name=age2]:checked');
} else {
$("#parent2").hide("fast");
$('input[name=age2]:checked');
}
if (showTop == 'expanded3') {
$("#parent2").hide("fast");
$("#parent3").show("fast");
$("#parent0").hide("fast");
$('input[name=age2]:checked');
}
});
//]]>
</script>
</head>
<body>
<fieldset>
<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
<input type="radio" name="age2" value="Maybe" class="aboveage2" /> Maybe</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>
<ol id="parent3" class="formset">
<li><strong>Info for Maybe Answer:</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>
<ol id="parent0" class="formset">
<li><strong>4444444444444</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>
</body>
</html>