JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<form>
    <hr class="separate" />
    <!-- Question 1 -->
    	<h3 class="question_title">Survey Question 1</h3>

    <label for="question_1">Question 1</label>
    <input type="text" name="question_1" value="" class="question_field" id="question_1">
    <label for="type_1">Type for Question 1</label>
    <div class="option_field">
        <select name="type_1" id="type_1" class="type" onchange="" size="1">
            <option value="oneline">One Line Text Field</option>
            <option value="freeresponse">Free Response Text Field</option>
            <option value="rating10">Rating (1-10)</option>
            <option value="rating4">Poor, Fair, Good, Excellent</option>
            <option value="dropdown">Drop-Down Menu</option>
        </select>
    </div>
    <div id="dropdown_list_1" class="dropdown_list">
        <label for="question_1_list">Question 1 List</label>
        <input type="text" name="question_1_list" value="" class="question_list" id="question_1_list" placeholder="Option A,Option B,Option C,Option D">
    </div>
    <hr class="separate" />
    <!-- Question 2 -->
    	<h3 class="question_title">Survey Question 2</h3>

    <label for="question_2">Question 2</label>
    <input type="text" name="question_2" value="" class="question_field" id="question_2">
    <label for="type_2">Type for Question 2</label>
    <div class="option_field">
        <select name="type_2" id="type_2" class="type"  onchange="" size="1">
            <option value="oneline">One Line Text Field</option>
            <option value="freeresponse">Free Response Text Field</option>
            <option value="rating20">Rating (1-10)</option>
            <option value="rating4">Poor, Fair, Good, Excellent</option>
            <option value="dropdown">Drop-Down Menu</option>
        </select>
    </div>
    <div id="dropdown_list_2" class="dropdown_list">
        <label for="question_2_list">Question 2 List</label>
        <input type="text" name="question_2_list" value=""...

CSS

.survey_name {
    font-size: 1.5em;
    width: 855px;
    height: 30px;
    margin: 10px 30px;
}
.question_title {
    font-size: 1.5em;
    margin: 30px 0 5px 0;
}
.question_field {
    width: 855px;
    margin: 10px 30px;
}
.question_list {
    width: 855px;
    margin: 10px 30px;
}
.option_field {
    margin: 5px 30px;
}
#triggered_group {
    background-color: lightgreen;
    border: thin dotted #404040;
    padding: 10px;
}
.dropdown_list {
    background-color: lightgreen;
    border: thin dashed #404040;
    padding: 10px;
}
.separate {
}

JavaScript

$(document).ready(function () {
    $(".dropdown_list").hide();

    $(".type").change(function () {
        $(this).closest(".option_field").next(".dropdown_list")
            .toggle($(this).val() == "dropdown");
    });

});