JSFiddle - React, Tailwind, and code Playground

by Ajay Patel

HTML

<label for="creditcard-type">Payment method:</label>
                    <div class="radioElem">
                    <input type="radio" name="Credit_Card_Type" id="creditcard-type" value="Cash" class="aboveage1"/>
                    <label for="maxiCab">Cash</label>
                    <div class="clear"></div>
                    <input type="radio" name="Credit_Card_Type" id="creditcard-type" value="No" class="aboveage1"/>
                    <label for="maxiCab">Credit Card</label>
                    </div>
                <div class="clear"></div>
                <!-- jQuery slider -->
                <ol id="parent1" class="formset">
                <label for="creditcard-type">Card Type:</label>
                <input type="radio" name="Credit_Card_Type" id="creditcard-type" value="Visa" />
                <img src="images/_common/visa2.gif" alt="Visa" title="Visa" />
                <input type="radio" name="Credit_Card_Type" id="creditcard-type" value="Master" />
                <img src="images/_common/mastercard1.gif" alt="Master" title="Master" />
                <input type="radio" name="Credit_Card_Type" id="creditcard-type2" value="AMEX" />
                <img src="images/_common/amex1.gif" alt="AMEX" title="AMEX" />
                <div class="clear"></div>
                <div class="rowElem">
                        <label for="creditcard-expiry-date">Expiry Date:</label>
                        <input name="Credit_Card_Expiry_Date" id="creditcard-expiry-date" type="text" size="10"/>
                        <div class="clear"></div>
                </div>
                <div class="rowElem">
                        <label for="creditcard-csc">CSC:</label>
                        <input name="Credit_Card_CSC" id="creditcard-csc" type="text" size="4" />
                        <div class="clear"></div>
                </div>
                <span>Note: For credit card payments, 10% administrative charges and 7% GST by the credit card company...

JavaScript

$(document).ready(function(){
    $("#parent1").css("display","none");
        $(".aboveage1").click(function(){

        if ($('input[name=Credit_Card_Type]:checked').val() == "Credit Card" ) {
            $("#parent1").slideDown("fast"); //Slide Down Effect
        } else {
            $("#parent1").slideUp("fast");  //Slide Up Effect
        }
     });
});