Pure CSS Filters

While researching solutions for an AJAX/dynamic filtering solution, I tested a proof-of-concept way to implement hiding and showing of items using only CSS. No Javascript or AJAX!

This uses the hidden checkbox method I saw elsewhere to create buttons with state information. This is then used to hide and show items. Click on the filters below.

Category 1

Category 2

The pertinent CSS to make it work is below. CSS for styling not shown.

<style>
/* Show product when category is clicked */
#prodcat1:checked ~ .productsgrid .cat-1,
#prodcat2:checked ~ .productsgrid .cat-2,
#prodcat3:checked ~ .productsgrid .cat-3,
#roomcat1:checked ~ .productsgrid .roomcat-1,
#roomcat2:checked ~ .productsgrid .roomcat-2,
#roomcat3:checked ~ .productsgrid .roomcat-3
 {
	display:inline-block;
}

/* Highlight category selector when selected */
#prodcat1:checked ~ .productfilters .prodcat1label,
#prodcat2:checked ~ .productfilters .prodcat2label,
#prodcat3:checked ~ .productfilters .prodcat3label,
#roomcat1:checked ~ .productfilters .roomcat1label,
#roomcat2:checked ~ .productfilters .roomcat2label,
#roomcat3:checked ~ .productfilters .roomcat3label {
	color:#ffffff;
	background-color:#ffcc66;
}
</style>

And the HTML is below. A checkbox is created for each category. To create a button for it, the label tag is used. A product is assigned to a category by classes corresponding to its category. The rest is handled in CSS. What’s important is that the checkboxes are at a sibling level with the product filters and product grid elements.

<input class="itemcheckbox" id="prodcat1" type="checkbox" checked="checked">
<input class="itemcheckbox" id="prodcat2" type="checkbox" checked="checked">
<input class="itemcheckbox" id="prodcat3" type="checkbox" checked="checked">
<input class="itemcheckbox" id="roomcat1" type="checkbox" checked="checked">
<input class="itemcheckbox" id="roomcat2" type="checkbox" checked="checked">
<input class="itemcheckbox" id="roomcat3" type="checkbox" checked="checked">


<div class="productfilters">
<h4>Category 1</h4>
<ul>
<li><label class="prodcat1label" for="prodcat1">Lighting</label></li>
<li><label class="prodcat2label" for="prodcat2">Plumbing</label></li>
<li><label class="prodcat3label" for="prodcat3">Decor</label></li>
</ul>

<h4>Category 2</h4>
<ul>
<li><label class="roomcat1label" for="roomcat1">Bathroom</label></li>
<li><label class="roomcat2label" for="roomcat2">Kitchen</label></li>
<li><label class="roomcat3label" for="roomcat3">Bedroom</label></li>
</ul>

</div>


<div class="productsgrid">
<h2>Products</h2>
<div class="proditem cat-1 roomcat-2"><a>Pendant Light</a></div>
<div class="proditem cat-2 roomcat-1"><a>Faucet</a></div>
<div class="proditem cat-3 roomcat-3 roomcat-2"><a>Vase</a></div>
<div class="proditem cat-3 roomcat-1"><a>Mirror</a></div>

</div>

Leave a Reply