JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<label>
<input type="checkbox" id="EuropeCountries" />Europe</label>
<label>
<input type="checkbox" id="NAMCountries" />North America</label>
<label>
<input type="checkbox" id="SAMCountries" />South America</label>
<label>
<input type="checkbox" id="AfricaMECountries" />Africa and Middle East</label>
<!-------------------------------------------------------------------->
<div class="CountryWrapper">
<br>
<label class="myEuropeCountries">
<input type="checkbox" value="Spain" />Spain</label>
<label class="myEuropeCountries">
<input type="checkbox" value="Germany" />Germany</label>
<label class="myEuropeCountries">
<input type="checkbox" value="Austria" />Austria</label>
<label class="myNAMCountries">
<input type="checkbox" value="USA" />USA</label>
<label class="myNAMCountries">
<input type="checkbox" value="Mexico" />Mexico</label>
<label class="myNAMCountries">
<input type="checkbox" value="Canada" />Canada</label>
<label class="mySAMCountries">
<input type="checkbox" value="Brazil" />Brazil</label>
<label class="mySAMCountries">
<input type="checkbox" value="Argentina" />Argentina</label>
<label class="mySAMCountries">
<input type="checkbox" value="Chile" />Chile</label>
<label class="myAfricaMECountries">
<input type="checkbox" value="SouthAfrica" />South Africa</label>
<label class="myAfricaMECountries">
<input type="checkbox" value="Egypt" />Egypt</label>
<label class="myAfricaMECountries">
<input type="checkbox" value="SaudiArabia" />Saudi Arabia</label>
</div>
CSS
.CountryWrapper {
border: 1px solid blue;
height: 150px;
width: 480px;
border: 1px solid blue;
}
.myEuropeCountries {
display: none;
}
.myNAMCountries {
display: none;
}
.mySAMCountries {
display: none;
}
.myAfricaMECountries {
display: none;
}
JavaScript
function sortByText(a, b) {
return $.trim($(a).text()) > $.trim($(b).text());
}
var li = $(".CountryWrapper").children("label").detach().sort(sortByText)
$(".CountryWrapper").append(li)
$('input[type="checkbox"]').click(function() {
$('.my' + $(this).attr("id")).slideToggle(200)
})