Silverburch Silverburch - 20 days ago 6
CSS Question

Making checkboxes in columns work with 'display:none'

In my UI, if both a region and its country checkbox are selected you can see both the region the and its countries on the right hand side. If only the country checkbox is selected, the relevant countries are put into an 'Ungrouped countries' box. See fiddle: http://jsfiddle.net/m92hfs0b/

I'm trying to display the countries to a maximum of 3 columns, whether they are
displayed under their region, or whether shown in the 'ungrouped countries' box.
The country order needs to be from left to right. I've tried using advice from the many posts here, including inline block, CSS columns, etc, but each seems to stop the 'display:none' from working, while 'visibility: hidden' doesn't solve anything either.
Any help 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>




Answer

Use these two styles

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

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