JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<div>
  <label>
    <input type="radio" name="colorRadio" value="red"> red</label>
  <label>
    <input type="radio" checked name="colorRadio" value="green"> green</label>
  <label>
    <input type="radio" name="colorRadio" value="blue"> blue</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() {
    var red = $('input[value=red]');
    var green = $('input[value=green]');
    var blue = $('input[value=blue]');
    function update() {
      $('.box.red').toggle(red.is(':checked'));
      $('.box.green').toggle(green.is(':checked'));
      $('.box.blue').toggle(blue.is(':checked'));
    }

    $('input[type="radio"]').change(update);
    update();
  });