Show/Hide extra inputs

by kthornbloom

HTML

<b>Demo:</b><br><br>

</b><div class="checkbox-group required">
  <label for="">LABEL</label>
  <input type="checkbox" data-toggle="1" />
</div>


<div class="form-columns" data-toggle-div="1">
  <div>
    <label for="">Extra Field</label>
    <input type="text">
  </div>
</div>

<div class="checkbox-group required">
  <label for="">Yes</label>
  <input type="radio" name="group" data-toggle="2" />
  <label for="">No</label>
  <input type="radio" name="group" data-hide="2"/>
</div>


<div class="form-columns" data-toggle-div="2">
  <div>
    <label for="">Extra Field</label>
    <input type="text">
  </div>
</div>

<br>
<hr>
Add an attribute of <b>data-toggle="<i>some number</i>"</b> to the input
<br>
Add an attribute of <b>data-hide="<i>some number</i>"</b> to inputs that should HIDE the extra fields when checked, but not ever show the extra fields.
<br>
Add an attribute of <b>data-toggle-div="<i>same number</i>"</b> to the div you want to show & hide
<br>

CSS

body {
  font-family:sans-serif;
}

JavaScript

// Hide extra form fields at page load
$('div[data-toggle-div]').hide();

// Toggle extra form fields
$(document.body).on('change deselect', '[data-toggle]', function(event) {
  var a = $(this).attr("data-toggle");
  if ($(this).is(':checked')) {
    $('[data-toggle-div="' + a + '"]').slideDown();
  } else {
    $('[data-toggle-div="' + a + '"]').slideUp();
  }
});

// For inputs that only HIDE extra fields instead of toggle
$(document.body).on('change', '[data-hide]', function(event) {
  var b = $(this).attr("data-hide");
  if ($(this).is(':checked')) {
    $('[data-toggle-div="' + b + '"]').slideUp();
  }
});