JSFiddle - React, Tailwind, and code Playground

by Harisankaran Parameswaran

HTML

<select id="sbFruit" name="sbFruit" onChange="showHide();">
  <option>Apple</option>
  <option>Blueberry</option>
  <option value="OrangeSubGroup">Orange</option>
  <option>Pear</option>
</select>

<!-- Toggled Group when 'sbFruit' = Orange -->
<div id="SubGroup">
<div id="OrangeSubGroup" name="OrangeSubGroup">
  <label id="Orange_Fresh">Is the Orange Fresh?</label>
  <input name="Fresh" type="radio" value="Yes" />Yes
  <input name="Fresh" type="radio" value="No" />No
  <br />
  <label id="Orange_moldy">Is the Orange moldy?</label>
  <input name="Red" type="radio" value="Yes" />Yes
  <input name="Red" type="radio" value="No" />No
</div>
</div>

CSS

.hidden{display: none;}
.visible{display: block;}

JavaScript

window.onload = showHide;

function showHide(){
    var el = document.getElementById("sbFruit");
    var selectedVal = el.options[el.selectedIndex].value;
    var subGroupEl = document.getElementById("SubGroup").getElementsByTagName("div");
    for(var i=0; i<subGroupEl.length; i++){
        subGroupEl[i].className = "hidden";
    }
    if(document.getElementById(selectedVal))
        document.getElementById(selectedVal).className = "visible";
    else
        console.log("No Sub Groups present for this option");
}