JSFiddle - React, Tailwind, and code Playground

by SullysRants

HTML

<p>
  <div class="form-group">
    <label class="control-label">Presenting A Paper <span class="text-muted">(Required)</span></label>
    <div class="Presenting_A_Paper">
      <input type="radio" name="Presenting_A_Paper" id="Presenting_A_Paper_Yes" value="Yes" required> Yes
      <input type="radio" name="Presenting_A_Paper" id="Presenting_A_Paper_No" value="No" required> No
    </div>
  </div>
</p>

<div class="row" id="Title_of_Paper_ShowHide" style="display:none;">
  <div class="form-group col-md-8">
    <label class="control-label">Title of Paper <span class="text-muted">(Required)</span></label>
    <input name="Title_of_Paper" type="text" class="form-control" id="Title_of_Paper" placeholder="Title of Paper" />
  </div>
</div>

JavaScript

$(function() {

      $('input:radio[name=Presenting_A_Paper]').change(function() {
        if (this.value == 'Yes') {
          $('#Title_of_Paper_ShowHide').show();
          $('#Title_of_Paper').attr('required', '');
          $('#Title_of_Paper').removeAttr('data-parsley-validate-if-empty');
        } else if (this.value == 'No') {
          $('#Title_of_Paper_ShowHide').hide();
          $('#Title_of_Paper').removeAttr('required');
          $('#Title_of_Paper').attr('data-parsley-validate-if-empty', '');
        }
      });

    });