JSFiddle - React, Tailwind, and code Playground

by csaltyj

HTML

<ul id="filters">
    <li><input type="checkbox" checked="checked" value="categorya" class="togglebox" id="filter-categorya" /><label for="filter-categorya">Category A</label></li>
    <li><input type="checkbox" checked="checked" value="categoryb" class="togglebox" id="filter-categoryb" /><label for="filter-categoryb">Category B</label></li>
</ul>

<div class="categorya"></div>
<div class="categorya"></div>
<div class="categorya"></div>
<div class="categorya"></div>
<div class="categoryb"></div>
<div class="categoryb"></div>
<div class="categoryb"></div>

CSS

.categorya, .categoryb {
    width: 150px;
    height: 150px;
    background: red;
    margin: 10px;
    float: left;
}

.categoryb {
    background: blue;
}

JavaScript

$('.togglebox').click(function() {
    var category = $(this).val();
    
    if ($(this).attr('checked') == '')
        $('.' + category).stop().fadeTo('slow', 0.2);
    else
        $('.' + category).stop().fadeTo('slow', 1.0);
        
});