JSFiddle - React, Tailwind, and code Playground

by Sam Carleton

HTML

<table>
        <tr>
							<td width="300px" align="right">Section GG: System will populate response?</td>
							<td align="left">
								<input id="mds3sysPopSecGGYes" type="radio" value="Y" name="ESOLmds3sysPopSecGG" tabindex="6"><label for="mds3sysPopSecGGYes">Yes</label>
								&nbsp;&nbsp;
								<input id="mds3sysPopSecGGNo" type="radio" value="N" name="ESOLmds3sysPopSecGG" tabindex="6" checked><label for="mds3sysPopSecGGNo">No</label>
							</td>
						</tr>
	                    <tr class="SectionGGSrc">
							<td width="300px" align="right">Section GG: Source data that will populate response:</td>
							<td align="left">
								<input type="radio" id="mds3sysPopSecGGUda" value="UDA" name="ESOLmds3sysPopSecGGSrc" tabindex="7"><label for="mds3sysPopSecGGUda">Assessment</label>
								&nbsp;&nbsp;
								<input type="radio" id="mds3SysPopSecGGTPS" value="TPS" name="ESOLmds3sysPopSecGGSrc" tabindex="7"><label for="mds3SysPopSecGGTPS">Third Party Software</label>
							</td>
						</tr>
</table>

JavaScript

$( document ).ready(function() {

	function setSectionGGVisiblity(value){
		if (value == 'Y') {
			$(".SectionGGSrc").css("visibility","visible");
		} else {
			$(".SectionGGSrc").css("visibility","collapse");
		}
	}

	$('input[type=radio][name=ESOLmds3sysPopSecGG]').change(function() {
		setSectionGGVisiblity(this.value);
	});
	
	setSectionGGVisiblity($("input[name='ESOLmds3sysPopSecGG']:checked").val());
});