JSFiddle - React, Tailwind, and code Playground
HTML
<div>Please select operation:
<br />
<input type="radio" id="op1" name="op" value="check_username">Check Username
<br />
<input type="radio" id="op2" name="op" value="find_profile">Find Profile
<br />
<input type="radio" id="op3" name="op" value="check_credentials">Check Credentials</div>
<br />
<div id="un">Username:
<br />
<input type="text" />
</div>
<div id="pwd">Password:
<br />
<input type="text" />
</div>
JavaScript
$(document).ready(function () {
$('#un, #pwd').hide();
$('input[name="op"]').prop('checked', false);
$("input[type=button]").attr("disabled", "disabled");
$('input:radio[name=op]').change(function () {
var op = $('input:radio[name=op]:checked').val();
alert(op);
switch (op) {
case 'check_username':
$('#un').show();
$('#pwd').hide();
break;
case 'find_profile':
$('#un').show();
$('#pwd').hide();
break;
case 'check_credentials':
$('#un, #pwd').show();
break;
}
});
});