JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<section class='row' id='survey_page'>
  <div class='small-12 columns'>
    <h1 class='text-center'>Tell us how we’ve been doing</h1>
    <div class='small-12 medium-9 small-centered columns'>
      <form class="simple_form submit_form" novalidate="novalidate" id="edit_survey_4" action="/surveys/180dayssurvey" accept-charset="UTF-8" method="post">
        <input name="utf8" type="hidden" value="&#x2713;" />
        <input type="hidden" name="_method" value="patch" />
        <input type="hidden" name="authenticity_token" value="4Sb68V4KpF9zwSIuVAKv/7SiuIV+wDArsKHBzlS227TjhdCAkANpQ1iOe6ALtDuFa0VrUAFCrOLFrlGxemOohw==" />
        <div class="input string required survey_answers">
          <label class="string required" for="survey_answers">Email <i title="required">*</i></label>
          <input name="survey[answers][email]" value="" class="string required email_field" type="text" id="survey_answers" />
        </div>
        <div class="input radio_buttons optional survey_answers  parent_question">
          <label class="radio_buttons optional">1. Have you recently experienced any technical issues while using Kadince?</label>
          <div class="radio">
            <label for="survey_answers_yes">
              <input name="survey[answers][question18]" value="Yes" data-child-name="survey[answers][question19]" data-trigger-on="1" class="radio_buttons optional" type="radio" id="survey_answers_yes" />Yes</label>
          </div>
          <div class="radio">
            <label for="survey_answers_no">
              <input name="survey[answers][question18]" value="No" data-child-name="survey[answers][question19]" data-trigger-on="1" class="radio_buttons optional" type="radio" id="survey_answers_no" />No</label>
          </div>
        </div>
        <div class="input radio_buttons optional survey_answers  hidden parent_question">
          <label class="radio_buttons optional">2. Did you report the issue?</label>
          <div class="radio">
            <label...

CSS

body {
  background: #ffffff none repeat scroll 0 0;
  color: #535458;
  cursor: auto;
  font-family: "Open Sans", sans-serif;
  font-style: normal;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  position: relative;
}

.hidden,
.hide {
  display: none;
}

.invisible {
  visibility: hidden;
}

textarea {
  height: auto;
  min-height: 50px;
}

select {
  width: 100%;
}

JavaScript

$(function() {
  $('#survey_page').on('change',
    '.parent_question select, .parent_question input',
    function() {
      console.log($(this).attr('name') + " selected: " + $(this).val());
      var child_input = $('[name="' + $(this).data('child-name') + '"]');
      //console.log(child_input);
      var child_question = child_input.closest('.survey_answers');
      var trigger_on = $(this).data('trigger-on');
      var show = $(this)[0].selectedIndex == undefined ? ($(this).closest('.survey_answers').find('input').index($(this)) + 1) == trigger_on : $(this)[0].selectedIndex == trigger_on;
      console.log("Show child (" + $(this).data('child-name') + "): " + show);
      if (show) {
        child_question.show();
      } else {
        child_question.hide();
        child_input.val('');
        child_input.attr('checked', false);
        console.log(child_input);
        if (child_input.is("textarea")) {
          console.log("Next item is textarea, triggering change.");
          child_input.trigger('change');
        }
      }
    });
});