JSFiddle - React, Tailwind, and code Playground

HTML

<div id="promoBox" class='noPromo'>
    <div class='question'>
        Do you have a gift card or promotional code?
        <label><input id="promoTrigger" type="radio" name="promo" /> Yes</label> <label><input type="radio" name="promo" checked="checked" /> No</label>
    </div>
    <div class='field'>
        <label>Gift Card or Promo Code: <input type="text" id="promoCode" /></label>
    </div>
</div>

CSS

#promoBox.noPromo .field{
    display:none;
}

#promoBox.noPromo .question{
    display:block;
}

#promoBox .question{
    display:none;
}

JavaScript

$(function(){
    $("#promoTrigger").click(function(){
        $("#promoBox").removeClass('noPromo');
        $("#promoCode").focus();
    });
});