JSFiddle - React, Tailwind, and code Playground

by Jonathan Sampson

HTML

<ul>
    <li>
    <label for="select-choice-0" class="select">Parking Method:</label>
    <select name="select-choice-15" id="parking-options" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
        <option value="">Select One</option>
        <option value="self">Self Parking</option>
        <option value="auto">Valet Parking</option>
    </select>
    </li>
    <li>
        <div class="self carlocation">
            <h1>Enter Car Location:</h1>
            <label for="select-choice-0" class="select">Floor:</label>
            <select name="select-choice-15" id="location-floor" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
                <option value="">Floor Select</option>
                <option value="f1">F1</option>
                <option value="f2">F2</option>
                <option value="f3">F3</option>
                <option value="f4">F4</option>
            </select>
        </div>
    </li>
    <li>
        <div class="self car-position">
            <label for="select-choice-0" class="select">Row:</label>
            <select name="select-choice-15" id="position-row" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
                <option value="">Row Select</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
            </select>
        </div>
    <li>
</ul>

CSS

.carlocation,
.car-position {
    display: none;
}

JavaScript

$("#parking-options").on("change", function(){
    $(this).val() === "self"
        ? $("div.self").slideDown()
        : $("div.self").slideUp();
});