JSFiddle - React, Tailwind, and code Playground

by synz izynz

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<label><input type="checkbox" name="colorCheckbox" id="Europe" />Europe</label>

<label><input type="checkbox" name="colorCheckbox" id="Asia" />Asia</label>


<div class="mywrapper">

  <label class="myEurope">
    <input type="checkbox" value="Germany" />Germany</label>
  <label class="myEurope">
    <input type="checkbox" value="Austria" />Austria</label>

    <label class="myAsia">
      <input type="checkbox" value="China" />China</label>
    <label class="myAsia">
      <input type="checkbox" value="Japan" />Japan</label>

</div>

CSS

.mywrapper {
  border: 1px solid blue;
  height: 200px;
  width: 300px;
  border: 1px solid blue;
}

.myEurope {
display: none;
}


.myAsia {
display: none;
}

JavaScript

$('input[type="checkbox"]').click(function() {
  // $('.my' + $(this).attr("id")).slideToggle(200);
  $('.mywrapper > label:not(.my' + $(this).attr("id")+")").slideToggle(200);
  // @
  // $('.mywrapper').find("label").not(".my" + $(this).attr("id")).slideToggle(200);
})