JSFiddle - React, Tailwind, and code Playground

by Joseph Rex

HTML

<p>
<label for="good">Good</label>
<input type="radio" name="trait" class="myRadio" id="good" value="good">
</p>
<p>
<label for="bad">Bad</label>
<input type="radio" name="trait" class="myRadio" id="bad" value="bad">
</p>
<p>
<label for="ugly">Ugly</label>
<input type="radio" name="trait" class="myRadio" id="ugly" value="ugly">
</p>
<div class="box-container">
  <div class="box box__good">
  You've been good
  </div>
  <div class="box box__bad">
  You've been bad
  </div>
  <div class="box box__ugly">
  You are ugly
  </div>
</div>

CSS

.box{
  display: none;
}

JavaScript

$('.myRadio').change(function(){
  $radio = $(this).val();
  $('.box').hide('fast', function(){
    $('.box__'+$radio).show();
  });
});