JSFiddle - React, Tailwind, and code Playground

by Trevor Dowdle

HTML

<ul class="filter_categories">
<li> Cat 1 </li>
<li> Cat 2 </li>
<li> Cat 3 </li>
<li> Cat 4 </li>
</ul>

<div class="category-cat-1">
    cat1
</div>

<div class="category-cat-2">
    cat2
</div>

<div class="category-cat-3">
    cat3
</div>

<div class="category-cat-4">
    cat4
</div>

JavaScript

$(document).ready(function(){
    $('.filter_categories li').click(function(){
        var liClass = $(this).html().toLowerCase().trim();
        liClass = liClass.replace(' ','-');
        $('.category-'+liClass).fadeOut();
    });
});