JSFiddle - React, Tailwind, and code Playground

by Sparrow Squire

HTML

<legend>Complaint Options</legend>
<p>Please indicate what element(s) of your booking your complaint is regarding</p>
<div id="complaint-options">
    <label for="flights" class="active">Flights</label>
    <input type="checkbox" name="active_section[]" value="flights" id="flights" class="active_section" />
    <div class="option-panel">
        <label for="flights-delay" class="active">Delay</label>
        <input type="checkbox" name="active_option[]" value="flights_delay" id="flights-delay" />
        <label for="flights-amendment" class="active">Amendment</label>
        <input type="checkbox" name="active_option[]" value="flights_amendment" id="flights-amendment" />
        <label for="flights-other" class="active">Other</label>
        <input type="checkbox" name="active_option[]" value="flights_other" id="flights-other" />
        <label for="flights-comments" class="active">Comments</label>
        <textarea name="flights_comments" rows="3"></textarea>
    </div>
    <!-- end .option-panel -->
    <label for="accommodation" class="active">Accommodation</label>
    <input type="checkbox" name="active_section[]" value="accommodation" id="accommodation" class="active_section" />
    <div class="option-panel">
        <label for="accommodation-location" class="active">Location</label>
        <input type="checkbox" name="active_option[]" value="accommodation_location" id="accommodation-location" />
        <label for="accommodation-food" class="active">Quality of food</label>
        <input type="checkbox" name="active_option[]" value="accommodation_food" id="accommodation-food" />
        <label for="accommodation-staff" class="active">Staff</label>
        <input type="checkbox" name="active_option[]" value="accommodation_staff" id="accommodation-staff" />
        <label for="accommodation-standards" class="active">Standards of accommodation</label>
        <input type="checkbox" name="active_option[]" value="accommodation_standards"...

CSS

#complaints label {
	width: 120px;
	margin-bottom: 5px
}

#complaint-options label.active {
	margin-bottom: 10px;
	padding: 0px
}
#complaint-options .option-panel {display: none}

#complaint-options .option-panel label {width: 200px !important}

JavaScript

$( document ).ready(function() {

    /**
    * Complaint form options- show/ hide nested checkbox lists
    */
    $('.active_section').change(function () {

        var visible = this.checked;

        if (visible) {
            $(this).next('.option-panel').show();
        } else {
            $(this).next('.option-panel').hide();
        }
    });

});