JSFiddle - React, Tailwind, and code Playground

jQuery Filtering

by Jennifer Perrin

HTML

<h2>jQuery Filtering Demo</h2>

<p>
    <button class="f-red">Filter Red Items</button>
    <button class="f-blue">Filter Blue Items</button>
    <button class="f-green">Filter Green Items</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="f-all">All Items</button>
</p>
<div class="red">First</div>
<div class="red">Second</div>
<div class="blue">Third</div>
<div class="green">Fourth</div>
<div class="red">Fifth</div>
<div class="blue">Sixth</div>
<div class="blue">Seventh</div>
<div class="green">Eighth</div>

CSS

body {
    padding: 2% 5%;
    font-family: sans-serif;
}
button {
    padding: 1em;
    border: 0;
    margin: 0.25em;
    color: #fff;
    cursor: pointer;
}
.f-red {
    background: #ff4136;
}
.f-red:hover {
    background: #e90d00;
}
.f-green {
    background: #2ecc40;
}
.f-green:hover {
    background: #208e2c;
}
.f-blue {
    background: #0074d9;
}
.f-blue:hover {
    background: #004b8c;
}
.f-all {
    background: #333;
}
.f-all:hover {
    background: #0d0d0d;
}
.red, .green, .blue {
    color: #fff;
    padding: 1em;
    margin-bottom: 0.25em;
}
.red {
    background: #ff4136;
}
.green {
    background: #2ecc40;
}
.blue {
    background: #0074d9;
}

JavaScript

var fActive = '';

function filterColor(color) {
    if (fActive != color) {
        $('div').filter('.' + color).slideDown();
        $('div').filter(':not(.' + color + ')').slideUp();
        fActive = color;
    }
}

$('.f-red').click(function () {
    filterColor('red');
});
$('.f-blue').click(function () {
    filterColor('blue');
});
$('.f-green').click(function () {
    filterColor('green');
});

$('.f-all').click(function () {
    $('div').slideDown();
    fActive = 'all';
});