JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css">
<div class="checkbox">
  <label>
    <input type="checkbox" data-toggle="toggle" data-on="Ja" data-off="Nee" name="setting1" class="social-toggle"> 
      Setting 1
  </label>
</div>

<div id="setting1-settings" style="display:none;">
  <div class="checkbox">
    <label>
      <input type="checkbox" data-toggle="toggle" data-on="Ja" data-off="Nee" name="subsetting1" class="social-toggle"> Subsetting 1
    </label>
  </div>
  <div id="subsetting1-settings" style="display:none;">
    Subsubsetting 1
  </div>
</div>

JavaScript

$('.social-toggle').on('change',function(){
  if($(this).is(':checked')){
    $('#' + $(this).attr('name') + '-settings').slideDown();
  }else{
    $('#' + $(this).attr('name') + '-settings').slideUp();
  }
});