JSFiddle - React, Tailwind, and code Playground

by Jayna

HTML

<div id="j-select1" class="select-desc-list selected floatLeft marginRigSm">
  <input type="radio" name="radio-select" id="j-radio-description" checked="checked">
  <label for="radio-select1">Description</label>
</div>
<div id="j-select2" class="select-desc-list floatLeft">
  <input type="radio" name="radio-select" id="j-radio-list">
  <label for="radio-select2">Short List</label>
</div>

<div id="description">
  <h4 class="marginBotSm floatLeft">Describe the problem you solve:</h4>
  <h6 class="input-instruction floatRight">120 of 250 characters used</h6>

  <textarea name="companydesc" rows="4" cols="50"></textarea>

</div>
<div id="foo2"></div>

CSS

.select-desc-list {
    padding: 10px;
    font-size: 13px;
    font-weight: 700;
    margin: 0 10px 10px 0;
    color: #000;
}

.select-desc-list.selected {
    background-color: #ddd;
    border-radius: 3px;
    border: 1px solid #ddd;
}

#foo2 {
  background-color: red;
  width: 400px;
  height: 40px;
  display: none;
}

JavaScript

$(document).ready(function() {
  $('#j-radio-description').click(function() {
    if ($(this).is(':checked')) { 
      $("#description").show();
      $("#foo2").hide();
      $("#j-select1").addClass("selected");
      $("#j-select2").removeClass("selected");
    }
  });

  $('#j-radio-list').click(function() {
    if ($(this).is(':checked')) {
      $("#foo2").show();
      $("#description").hide();
      $("#j-select1").removeClass("selected");
      $("#j-select2").addClass("selected");
    }
  });
});