JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<form name="myForm" method="get" action="">
    <select name="type_select" id="type_select" class="options">
        <option value="0">--Select--</option>
        <option value="1">Work</option>
        <option value="2">Home</option>
    </select>
    <br />
    <input name="contact_name" id="contact_name" type="text" class="delay-load" />
</form>

CSS

SELECT.options {
    border-radius: 5px;
    padding: 2px;
}
INPUT[type='text'].delay-load {
    display: none;
    border-radius: 5px;
    padding: 2px;
    border: inset 1px;
}

JavaScript

$(document).ready(function () {
    $(document).bind("type-changed", function (e, data) {
        if (data.Selection <= 0) {
            $("#contact_name").fadeOut();
        } else {
            $("#contact_name").fadeIn();
        } // end if/else
    });
    $("#type_select").change(function (e) {
        $(document).trigger("type-changed", {
            Selection: $(this).val()
        });
    });
});