JSFiddle - React, Tailwind, and code Playground

by learner001

HTML

<div>
    <label>
        <input type="radio" name="colorRadio" value="red">red</label>
    <label>
        <input type="radio" name="colorRadio" value="green">green</label>
    <label>
        <input type="radio" name="colorRadio" value="blue" checked>blue <font style="color:red">The content of blue will be displayed automatically</font></label>
</div>
<div class="red box">You have selected <strong>red radio button</strong> so i am here</div>
<div class="green box">You have selected <strong>green radio button</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div>

CSS

.box {
    padding: 20px;
    display: none;
    margin-top: 20px;
    border: 1px solid #000;
}
.red {
    background: #ff0000;
}
.green {
    background: #00ff00;
}
.blue {
    background: #0000ff;
}

JavaScript

$(document).ready(function () {
    $('input[type="radio"]')
        .change(function () {
            if ($(this).attr("value") == "red") {
                $(".box").not(".red").hide();
                $(".red").show();
            }
            if ($(this).attr("value") == "green") {
                $(".box").not(".green").hide();
                $(".green").show();
            }
            if ($(this).attr("value") == "blue") {
                $(".box").not(".blue").hide();
                $(".blue").show();
            }
        })
        .filter(function() {
            return $(this).prop("checked");
        })
        .trigger("change");
});