JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<input type="radio" id="dl" value="YES" name="yesno" />Yes
<input type="radio" id="dl" value="NO" name="yesno" checked />No

<div id="dlyes"><label>Number</label><input type="text" id="dlno" /></div>

CSS

#dlyes {
    
    display:none;
    background-color:#efefef;
    width:400px;
    height:400px;
    margin-top:20px;
    
}

JavaScript

$('input[name|="yesno"]').change(function() {
   
    if($(this).val()=='YES') {
        $('#dlyes').fadeIn(0, function() {
         
             $(this).delay(500).animate( { backgroundColor: "white" }, 1000);   
            
        });
        
    } else {
        
        $('#dlyes').css('background-color', '#efefef');
        $('#dlyes').fadeOut(0);
    }
        
    
});