JSFiddle - React, Tailwind, and code Playground

by TheFiddler

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="isPatient">Patient</div>
    <div class="isPhysician">Physician</div>
    <div class="isNurse">Nurse</div>
</body>

CSS

.hidden {
    display: none;
}

JavaScript

$('[class^=is]').hide();

$("#theSelect").change(function(){          
    var value = $("#theSelect option:selected").val();
    var theDiv = $(".is" + value);
    
    theDiv.slideDown();
    theDiv.siblings('[class^=is]').slideUp();
});