JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<ul class="filters">
    <li><input type="checkbox" checked="checked" value="filterAll" id="filterIDall"><label for="filterIDall">All</label></li>
    <li><input type="checkbox" checked="checked" value="widget" id="filterIDwidget"><label for="filterIDwidget">widget</label></li>
    <li><input type="checkbox" checked="checked" value="timer" id="filterIDtimer"><label for="filterIDtimer">timer</label></li>
</ul>

<table id="matrix" class="filterThis">
<tr class="plugin">
    <td class="timer">Timer</td>
    <td class="bash">Bash</td>
    <td class="terminal">Terminal</td>
</tr>
<tr class="widget">
    <td class="clock timer">Clock</td>
    <td class="calendar">Calendar</td>
    <td class="blog">Blog</td>
</tr>
<tr class="menu">
    <td class="vertical">Vertical</td>
    <td class="horizontal">Horizontal</td>
    <td class="dropdown">Dropdown</td>
</tr>
</table>

CSS

body { font-family: Verdana; }
.hide { display: none; background: #000; }
.show { display: block; background: pink; }

JavaScript

$(document).ready(function() {

        // now lets give those filters something to do
        $('.filters input').click(function() {
            var value = $(this).attr("value");
            if (value == 'filterAll') {
                if ($(this).is(':checked')) {
                    $('.filters input').attr('checked', 'checked');
                    $('.filterThis tr').removeClass("hide");
                } else {
                    var one = 1;
                    $('.filterThis tr').addClass("hide");
                }
            } else {
                stringValue = '.filterThis .' + value;
                if ($(this).is(':checked')) {
                    $(stringValue).removeClass("hide");
                } else {
                    $(stringValue).addClass("hide");
                    $('.filters #filterIDall').removeAttr('checked');
                }
            }
        });

});