JSFiddle - React, Tailwind, and code Playground

by alanweibel

HTML

<ul id="filter">
    <li class="active"><a href="#" class="all">All</a>
    </li>
    <li><a href="#" class="welcome-kit">Welcome Kit</a>
    </li>
    <li><a href="#" class="forms">Forms</a>
    </li>
</ul>
<div id="list-area">
    <div class="welcome-kit">Item #1 welcome</div>
    <div class="forms">Item #2 forms</div>
    <div class="forms">Item #3 forms</div>
    <div class="welcome-kit">Item #4 welcome</div>
    <div class="forms">Item #5 forms</div>
    <div class="welcome-kit forms">Item #6 welcome forms</div>
    <div class="welcome-kit">Item #7 welcome</div>
    <div class="welcome-kit">Item #8 welcome</div>
    <div class="welcome-kit forms">Item #9 welcome forms</div>
    <div class="forms">Item #10 forms</div>
</div>

JavaScript

$(document).ready(function () {
    $('#filter li a').click(function () {
        var partnerResources = $(this).attr('class');
        $('#filter li').removeClass('active');
        $(this).parent().addClass('active');

        if (partnerResources == 'all') {
            $('#list-area').children('div').fadeIn(100);
        } else {
            $('#list-area').children('div:not(.' + partnerResources + ')').fadeOut(100);
            $('#list-area').children('div:has(.' + partnerResources + ')').fadeIn(100);
        }
        return false;
    });
});