JSFiddle - React, Tailwind, and code Playground

by queryj

HTML

<table id="rbl" border="0">
  <tbody>
    <tr>
      <td>
        <input id="rbl_y" type="radio" name="rblyn" value="Y">
        <label for="rbl_y">Yes</label>
      </td>
      <td>
        <input id="rbl_n" type="radio" name="rblyn" value="N">
        <label for="rbl_n">No</label>
      </td>
    </tr>
  </tbody>
</table>

<div id="div1" class="div">
  <p>
    something goes here.
  </p>
</div>

CSS

.div {
  height: 5em;
  width: 10em;
  border: 1px solid red;
  padding: 0.5em;
}

JavaScript

window.onload = pageLoad();

function pageLoad() {
  onSelectionChanged();

  var v = document.getElementsByName("rblyn");
  if (v[0].checked) {
    document.getElementById("div1").style.display = "block";
  } else {
    document.getElementById("div1").style.display = "none";
  }
}

function onSelectionChanged() {
  var radios = document.getElementsByName("rblyn");

  for (r in radios) {
    radios[r].onclick = function() {
      if (this.value === "Y") {
        document.getElementById("div1").style.display = "block";
      } else {
        document.getElementById("div1").style.display = "none";
      }
    }
  }
}