JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://github.com/jquery/jquery-color/raw/master/jquery.color.js"></script>
<label><input type="radio" name="myradios" value="yes"> Yes</label>
<label><input type="radio" name="myradios" value="no" checked /> No</label>
<div id="dlyes">
<label>Number</label><input type="text" id="dlno" />
</div>
<div id="dlyes2">
<label>Number</label><input type="text" value="1" id="dlno" />
</div>
CSS
#dlyes {
padding: 10px 15px;
margin-top: 20px;
}
#dlyes input {
margin-left: 20px;
}
JavaScript
var $div = $('#dlyes');
var $div2 = $('#dlyes2');
$div.hide();
$('input:radio[name="myradios"]').change(function() {
if (this.checked) {
if (this.value == 'yes') {
$div.show();
$div2.hide()
.css('background-color', '#FFD700')
.animate({'background-color': 'transparent'}, 1000);
} else {
$div.hide()
$di2.show()
}
}
});