JSFiddle - React, Tailwind, and code Playground

by CrossEye

HTML

<div>
    <p><label><input type="radio" name="yesno" value="1" checked="checked"/> Yes</label></p>
    <p><label><input type="radio" name="yesno" value="0"/> No</label></p>
</div>
<div id="yesDiv">Yes div</div>
<div id="noDiv">No div</div>

CSS

div {border: 1px solid #ccc; margin: 2em; padding: 3em;}
#yesDiv {background: #9f9;}
#noDiv {background: #f99;}

JavaScript

$("#noDiv").hide();

var createYesNoToggler = function(radioName, yesId, noId) {
    var divYes = $("#" + yesId), divNo = $("#" + noId), 
        radios = $("input[name=" + radioName + "]");
    radios.click(function() {
        if ($(this).val() === "1") {
            divYes.show();
            divNo.hide();
        } else {
            divYes.hide();
            divNo.show();
        }
    });
};

createYesNoToggler("yesno", "yesDiv", "noDiv");