JSFiddle - React, Tailwind, and code Playground

by Pokipsy

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<ul class="horizontal">
<li class="clickable showall">all</li>
<li class="clickable show a">a</li>
<li class="clickable show b">b</li>
<li class="clickable show c">c</li>
</ul>

<h3 class="filter">
All elements
</h3>
<ul>
<li class="a item">first a</li>
<li class="b item">second b</li>
<li class="a b item">third a b</li>
<li class="c item ">fourth c</li>
<li class="c b item">fifth c b</li>
</ul>

CSS

.clickable:hover {
    cursor: pointer;
}

.horizontal li {
    display:inline;
}

JavaScript

$(document).ready(function(){
    $(".showall").click(function(){
        $(".item").show();
        $(".filter").text("All elements")
    });
    var tags = [".a",".b",".c"]; 
    
    for(i = 0; i < 3; i++) {
    x=tags[i];
    $(".show".concat(x)).click(function(){
    		$(".item").hide();
        $(".item".concat(x)).show();
        $(".filter").text("Tag: ".concat(x))
    		});
    }
    
    /*
    x=tags[0];
    $(".show".concat(x)).click(function(){
    		$(".item").hide();
        $(".item".concat(x)).show();
        $(".filter").text("Tag: ".concat(x))
    		});
      /**/
});