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>