JSFiddle - React, Tailwind, and code Playground

by CR47

HTML

<form id="subscription-purchase">
    <input type="radio" name="payment_type" value="slimpay" checked="yes">Slimpay --||-- 
    <input type="radio" name="payment_type" value="ogone">Ogone
    <section id="slimpay">
        <input type="text" name="first_name" placeholder="firstname"/>
        <input type="text" name="last_name" placeholder="lastname"/>
    </section>
    <section id="ogone">
        <input type="text" name="card_num" placeholder="Credit Card #"/>
        <input type="text" name="cvc" placeholder="CVC"/>
        <input type="text" name="card_expir" placeholder="Card Expiration date"/>
    </section>
</form>

CSS

#ogone{
    display:none;
}

JavaScript

$("input[name='payment_type']").change(function() {
    if ($("input[name='payment_type']:checked").val() == 'slimpay'){
        $("#slimpay").show();
        $("#ogone").hide();
    }
    else if ($("input[name='payment_type']:checked").val() == 'ogone'){
        $("#slimpay").hide();
        $("#ogone").show();
    }
    else{
        //merp
    }
});