JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<table class="form-table"><tbody><tr valign="top"><th scope="row">Allow File Attachment</th><td>							<label>
					<input type="radio" name="wpas_ticket_plugin_options[allow_file_attachment]" value="yes" id="wpas_ticket_allow_file_attachment-yes" class="n2-parentoption" checked="">
					Yes				</label>
				<br class="n2_clear">
							<label>
					<input type="radio" name="wpas_ticket_plugin_options[allow_file_attachment]" value="no" id="wpas_ticket_allow_file_attachment-no" class="n2-parentoption">
					No				</label>
				<br class="n2_clear">
						<p class="description">Files can be attached to tickets and replies.</p>		</td></tr><tr valign="top" style="display: none;"><th scope="row">Upload Script</th><td>							<label>
					<input type="radio" name="wpas_ticket_plugin_options[upload_script]" value="fineuploader" id="wpas_ticket_upload_script-fineuploader" class="n2-optionchild n2-parentoption" data-parentoption="wpas_ticket_allow_file_attachment-yes" checked="">
					Fineuploader				</label>
				<br class="n2_clear">
							<label>
					<input type="radio" name="wpas_ticket_plugin_options[upload_script]" value="filepicker" id="wpas_ticket_upload_script-filepicker" class="n2-optionchild n2-parentoption" data-parentoption="wpas_ticket_allow_file_attachment-yes">
					Ink Filepicker				</label>
				<br class="n2_clear">
						<p class="description">Which upload script do you want to use? If you don't know what this is, leave default option.</p>		</td></tr><tr valign="top" style="display: none;"><th scope="row">Ink Filepicker API Key</th><td>			<input type="text" name="wpas_ticket_plugin_options[filepicker_api]" id="wpas_ticket_filepicker_api" value="" class="n2-optionchild regular-text" data-parentoption="wpas_ticket_allow_file_attachment-yes wpas_ticket_upload_script-fineuploader">
			<p class="description">If you need a Filepicker API key, <a href="https://developers.inkfilepicker.com/register/" target="_blank">create an account</a>.</p>		</td></tr><tr...

JavaScript

// Toggle show/hide options
	var child = $('.n2-optionchild').parents('tr').hide();
	$('.n2-parentoption').change(function (e) {
		var optionCurrent = $(this).attr('id');
		console.log(optionCurrent);
		if ($(this).is(':checked') && $(this).attr('id') == optionCurrent) {
			child.hide();
			$('.n2-optionchild[data-parentoption="' + optionCurrent + '"]').parents('tr').show();
		}
	}).change();