HTML
<div class="sample">
<div class="filter_groups">
<input type="radio" name="categories" id="All" value="All" checked>
<input type="radio" name="categories" id="Blue" value="Blue">
<input type="radio" name="categories" id="Green" value="Green">
<input type="radio" name="categories" id="Red" value="Red">
<input type="radio" name="categories" id="Square" value="Square">
<input type="radio" name="categories" id="Circle" value="Circle">
<ol class="filters">
<li>
<label for="All"> All </label>
</li>
<li>
<label for="Blue"> Blue </label>
</li>
<li>
<label for="Green"> Green </label>
</li>
<li>
<label for="Red"> Red </label>
</li>
<li>
<label for="Square"> Square </label>
</li>
<li>
<label for="Circle"> Circle </label>
</li>
</ol>
</div>
<ol class="targets">
<li class="target" data-category="Square">
<div class="square"></div>
</li>
<li class="target" data-category="Circle">
<div class="circle"></div>
</li>
<li class="target" data-category="Blue Square">
<div class="blue square"></div>
</li>
<li class="target" data-category="Blue Circle">
<div class="blue circle"></div>
</li>
<li class="target" data-category="Green Square">
<div class="green square"></div>
</li>
<li class="target" data-category="Green Circle">
<div class="green circle"></div>
</li>
<li class="target" data-category="Red Square">
<div class="red square"></div>
</li>
<li class="target" data-category="Red Circle">
<div class="red circle"></div>
</li>
</ol>
</div>
CSS
* {
margin: 0 auto;
padding: 0;
}
ol {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
.targets {
display: grid;
grid-gap: 40px;
grid-template-columns: repeat(auto-fit, 60px);
margin-top: 40px;
}
.circle, .square {
width: 60px;
height: 60px;
background-color: #EEE;
border: 1px solid #CCC;
}
.circle {
border-radius: 50%;
}
.blue {
background-color: #B8DBF6;
border: 1px solid #5ABEED;
}
.green {
background-color: #C8F8D1;
border: 1px solid #64D994;
}
.red {
background-color: #FAD6D7
}
input[type="radio"] {
position: absolute;
left: -9999px;
}
.filters {
margin-bottom: 2rem;
}
.filters * {
display: inline-block;
}
.filters label {
text-align: center;
padding: 0.25rem 0.5rem;
margin-bottom: 0.25rem;
min-width: 50px;
line-height: normal;
cursor: pointer;
transition: all 0.2s;
}
.filters label:hover {
background: #333;
color: #fff;
}
[value="All"]:checked ~ .filters [for="All"],
[value="Blue"]:checked ~ .filters [for="Blue"],
[value="Green"]:checked ~ .filters [for="Green"],
[value="Red"]:checked ~ .filters [for="Red"],
[value="Square"]:checked ~ .filters [for="Square"],
[value="Circle"]:checked ~ .filters [for="Circle"] {
background: #333;
color: #fff;
}
JavaScript
window.addEventListener('DOMContentLoaded', function(){
const input_categories = document.querySelectorAll("input[name=categories]");
const targets = document.querySelectorAll(".target");
for(let input_category of input_categories) {
input_category.addEventListener('change',function(){
for(let target of targets) {
target.style.setProperty('display', 'block');
}
if( this.checked ) {
if(this.value !== 'All') {
const not_checked_categories = document.querySelectorAll('.target:not([data-category~=' + '"' + this.value + '"])');
for(let not_checked_category of not_checked_categories) {
not_checked_category.style.setProperty('display', 'none');
}
}
}
});
}
});