JSFiddle - React, Tailwind, and code Playground

by FlasJunior

HTML

<ul id="category_filter">
    <li><input type="checkbox" data-categoryid="car" onclick="updateVisibility()" />Auto</li>
    <li><input type="checkbox" data-categoryid="cycle" onclick="updateVisibility()" />Velo</li>
    <li><input type="checkbox" data-categoryid="blue" onclick="updateVisibility()" />blau</li>
    <li><input type="checkbox" data-categoryid="green" onclick="updateVisibility()" />grün</li>
</ul>
<ul id="categories">
    <li data-categories="car blue" >Auto blau</li>
    <li data-categories="car green">Auto grün</li>
    <li data-categories="cycle blue">Velo blau</li>
    <li data-categories="cycle green">Velo grün</li>
</ul>

CSS

body{padding:10px;}
#category_filter li{float:left; margin:0 10px 10px 0;}
#categories{clear:both;}
#categories li{float:left; width:100px; height:100px; border:1px solid grey; padding:10px; margin:0 10px 10px 0;}

JavaScript

function updateVisibility() {
    var holder = $("#categories");
    
    var choices = $.map($(":checked"),function(el){
       return "[data-categories~=" + $(el).data("categoryid")+"]";
    }).join(",");
    
    if(choices){
        $("li",holder).fadeOut(500, function(){
              $(choices).fadeIn(500);
        });
    }else{
        $("li",holder).stop().fadeIn(500);
    }
};