Creating checkboxes in columns works with 'display: none'

Question

In my user interface, if the "Region and country" checkbox is selected, you can see both the region and its countries on the right side. If only the country flag is selected, the corresponding countries are placed in the "Ungrouped countries" field. See the script: http://jsfiddle.net/m92hfs0b/

I try to show countries with a maximum of three columns, regardless of whether they are displayed in their region or displayed in the "ungrouped countries" field. The country’s order should be from left to right. I tried using tips from many posts here, including the inline block, CSS columns, etc., but each seems to stop “display: none” from working, while “visibility: hidden” doesn't solve anything either . Any help is really appreciated.

// This opens up each of the regional sections, and at the end of the function it resorts the data for the 'Ungrouped countries' section.

$(function() {
  $('input[type="checkbox"]').click(function() {
    if ($(this).attr("value") == "RegionEurope") {
      $(".TextRegionEuroClass, .ContainerEuroClass").slideToggle(0)

      var targetBox = $(this).prop("checked") ? '.ContainerEuroClass' : '.CountryRHWrapperClass'
      $('.myEuropeCountries').appendTo($(targetBox))
    }

    if ($(this).attr("value") == "RegionNAM") {
      $(".TextRegionNAMClass, .ContainerNAMClass").slideToggle(0)
      var targetBox = $(this).prop("checked") ? '.ContainerNAMClass' : '.CountryRHWrapperClass'
      $('.myNAMCountries').appendTo($(targetBox))
    }
  });
});

function sortByText(a, b) {
  return $.trim($(a).text()) > $.trim($(b).text()) ? 1 : -1;
}

// Pre-sort all the countries under mywrapper div (still keeping them hidden)
var li = $(".CountryRHWrapperClass").children("label").detach().sort(sortByText)
$(".CountryRHWrapperClass").append(li)

// On-click handler will just toggle display, countries already sorted
$('input[type="checkbox"]').click(function() {
  $('.my' + $(this).attr("id")).slideToggle(0)
})

.TopHeader {
  border: 1px solid green;
  height: 50px;
  font-size: 20px;
}

.LHContainerClass {
  float: left;
  height: 200px;
  width: 300px;
  font-family: Arial font-size: 12px;
  border: 1px solid blue;
}

.RHContainerClass {
  margin-left: 305px;
  height: 200px;
  font-family: "Verdana", Arial, serif;
  font-size: 11px;
  margin-right: 10px;
  border: 1px solid pink;
}

.FourShapeRectangleClass {
  width: 100px;
  height: 50px;
  margin: 1px;
  border: 1px solid black;
  float: left;
  white-space: wrap;
}


/* -------------------------------------------------- */

#DivForLHRegionsHeaderID {
  height: 30px;
  white-space: wrap;
  border: 1px solid green;
  font-size: 15px;
  font-weight: bold;
}

#DivForLHCountriesHeaderID {
  height: 30px;
  white-space: wrap;
  border: 1px solid green;
  font-size: 15px;
  font-weight: bold;
}

#DivForLHRegionLabelsID {
  border: 1px solid green;
  line-height: 160%;
}


/* ---------------------------------------------------------- */

.CountryRHWrapperClass {
  margin-top: 30px;
  border: 1px solid brown;
}

.HeaderUngroupedCountriesClass {
  font-size: 12px;
  font-weight: bold;
}


/* ---------------------------------------------------------- */

.ContainerEuroClass {
  display: none;
  border: 1px solid blue;
}

.TextRegionEuroClass {
  display: none;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 0px 6px 3px;
  background: yellow;
}

.myEuropeCountries {
  display: none;
  width: 150px;
}


/* ---------------------------------------------- */

.ContainerNAMClass {
  display: none;
  border: 1px solid blue;
}

.TextRegionNAMClass {
  display: none;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 0px 6px 3px;
  background: yellow;
}

.myNAMCountries {
  display: none;
  width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="TopHeader">
  <label>Region and Country Selector</label>
</div>
<div id="LHContainerID" Class="LHContainerClass">
  <div id="DivForLHRegionsHeaderID" class="FourShapeRectangleClass">
    <label>Region</label>
  </div>
  <div id="DivForLHCountriesHeaderID" class="FourShapeRectangleClass">
    <label>Countries</label>
  </div>
  <div style='clear:both'></div>
  <div id="DivForLHRegionsCheckboxesID" class="FourShapeRectangleClass">
    <label><input type="checkbox" value="RegionEurope" />Region EU</label>
    <label><input type="checkbox" value="RegionNAM" />RegionNA</label>
  </div>
  <div id="DivForLHCountriesCheckboxesID" class="FourShapeRectangleClass">
    <label><input type="checkbox" id="EuropeCountries" />Country EU</label>
    <label><input type="checkbox" id="NAMCountries" />Country NA</label>
  </div>
</div>
<div id="RHContainerID" class="RHContainerClass">
  <div class="ContainerEuroClass">
    <div class="TextRegionEuroClass">Europe</div>
  </div>
  <div class="ContainerNAMClass">
    <div class="TextRegionNAMClass">North America</div>
  </div>
  <div class="CountryRHWrapperClass">
    <div class="HeaderUngroupedCountriesClass">Ungrouped countries</div>
    <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="myEuropeCountries"><input type="checkbox" value="France" />France</label>
    <label class="myEuropeCountries"><input type="checkbox" value="Switzerland" />Switzerland</label>
    <label class="myEuropeCountries"><input type="checkbox" value="Poland" />Poland</label>
    <label class="myNAMCountries"><input type="checkbox" value="Canada" />Canada</label>
    <label class="myNAMCountries"><input type="checkbox" value="Mexico" />Mexico</label>
    <label class="myNAMCountries"><input type="checkbox" value="USA" />USA</label>
    <label class="myNAMCountries"><input type="checkbox" value="Cuba" />Cuba</label>
    <label class="myNAMCountries"><input type="checkbox" value="Puerto Rico" />Puerto Rico</label>
    <label class="myNAMCountries"><input type="checkbox" value="Panama" />Panama</label>
    <label class="myNAMCountries"><input type="checkbox" value="Grenada" />Grenada</label>
  </div>
</div>

Run codeHide result

Answer 1

Use these two styles

    .myEuropeCountries:nth-child(3n):after {
        content: '\A';
        white-space:pre;
    }

    .myNAMCountries:nth-child(3n):after {
        content: '\A';
        white-space:pre;
    }