JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="selectContainer">
<select id="theSelect">
<option value="">- Select -</option>
<option value="Patient">Patient</option>
<option value="Physician">Physician</option>
<option value="Nurse">Nurse</option>
</select>
</div>
<div class="hidden isPatient">Patient</div>
<div class="hidden isPhysician">Physician</div>
<div class="hidden isNurse">Nurse</div>
</body>
CSS
.hidden {
display: none;
}
JavaScript
$("#theSelect").change(function(){
var value = $("#theSelect option:selected").val();
var theDiv = $(".is" + value);
theDiv.slideDown().removeClass("hidden");
theDiv.siblings('[class*=is]').slideUp(function() { $(this).addClass("hidden"); });
});