JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="#Type_of_Change"><strong>Type of Change</strong> <input class="validate[required]" name="Type of Change" type="radio" value="Termination" id="Type_of_Change" />Termination <input name="Type of Change" type="radio" value="Active Status Change" id="Type_of_Change" /> Active Status Change </div>
<div style="clear:both"> </div>
<div id="#Termination_Type" style="display:inline; margin-bottom:15px;"><b>Termination</b><input class="validate[required]" id="Termination_Type" name="Termination_Type" type="radio" value="Death" /> Death <input name="Termination_Type" type="radio" value="Discharge" /> Discharge <input name="Termination_Type" type="radio" value="Revocation" /> Revocation <input name="Termination_Type" type="radio" value="Transfer" /> Transfer</div>
<div id="Death" style="display:none; margin-bottom:15px">
<div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong> <br />
<input class="validate[required]" id="Date of Death" name="Date of Death" placeholder="Date of Death" type="text" /> </span> <span style="width:25%; float:left"><strong>Time</strong><br />
<input class="validate[required]" id="Time of Death" name="Time of Death" placeholder="Time of Death" type="text" /> </span></div>
</div>
<div id="Discharge" style="display:none; margin-bottom:15px">
<div style="width:100%; margin-bottom:15px; margin-top:15px;"><span style="width:25%; float:left"><strong>Date</strong> <br />
<input class="validate[required]" id="Discharge Date" name="Discharge Date" placeholder="Discharge Date" type="text" /> </span> <span style="width:25%; float:left"><strong>Reason</strong> <br />
<input class="validate[required]" id="Discharge...
JavaScript
jQuery(document).ready(function($) {
// bind event handler to the checkbox
$('input[name="Payer Type"]').change(function() {
// get input element where name attribute is starts with the checkbox value
// and then toggle the visibility based on the checked property
$('input[name^="' + this.value + '"]').toggle(this.checked);
// trigger the change event
}).change();
});
$("[name=Type_of_Change]").change(function(){
$("#Termination_Type").toggle($("[name=Type_of_Change]").index(this)===0);
$("#Active_Status_Change").toggle($("[name=Type_of_Change]").index(this)===1);
});
$("[name=Termination_Type]").change(function(){
$("#Death").toggle($("[name=Termination_Type]").index(this)===0);
$("#Discharge").toggle($("[name=Termination_Type]").index(this)===1);
$("#Revocation").toggle($("[name=Termination_Type]").index(this)===2);
$("#Transfer").toggle($("[name=Termination_Type]").index(this)===3);
});
$("[name=Active_Status_Change]").change(function(){
$("#Location").toggle($("[name=Active_Status_Change]").index(this)===0);
$("#Level_of_Care").toggle($("[name=Active_Status_Change]").index(this)===1);
$("#Diagnosis").toggle($("[name=Active_Status_Change]").index(this)===2);
});