JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<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>
<input type="submit" name="submit" value="Submit" class="submitbtn" />
</fieldset>

JavaScript

$("#parent2, #parent3").css("display","none");
    $(".aboveage2").click(function(){
        if ($('input[name=age2]:checked').val() == "No") {
            $("#parent2").slideDown("fast"); //Slide Down Effect
            $("#parent3").slideUp("fast"); //Slide Down Effect
            $.cookie('showTop', 'expanded'); //Add cookie 'ShowTop'
        }
        if ($('input[name=age2]:checked').val() == "Maybe") {
            $("#parent3").slideDown("fast"); 
            $("#parent2").slideUp("fast"); 
            $.cookie('showTop', 'expanded'); //Add cookie 'ShowTop'
        }
        if ($('input[name=age2]:checked').val() == "Yes"){
            $("#parent3").slideUp("fast"); 
            $("#parent2").slideUp("fast");  
            $.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');
      }