JSFiddle - React, Tailwind, and code Playground

by trewknowledge

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script src="https://raw.github.com/riklomas/quicksearch/master/jquery.quicksearch.js"></script>
<div id="filters option-set" data-filter-group="search">
    <form>
        <p>Search:</p>
        <input type="text" id="discussion-search">
    </form>
</div>
<div id="filters option-set"  data-filter-group="links1">    
   <a class="all selected" href="#" data-filter-value="">All</a>
   <a class="filter red" href="#" data-filter-value=".red">Red</a>
   <a class="filter blue" href="#" data-filter-value=".blue">Blue</a>
</div>

<div id="filters option-set" data-filter-group="links2">
   <a class="all selected" href="#" data-filter-value="">All</a>
   <a class="filter green" href="#" data-filter-value=".green">Green</a>
   <a class="filter yellow" href="#" data-filter-value=".yellow">yellow</a>
</div>

<div id="container">
    <div class="item red"><p>Red</p></div>
    <div class="item blue"><p>Blue</p></div>
    <div class="item green"><p>Green</p></div>
    <div class="item yellow"><p>Yellow</p></div>
    <div class="item red"><p>Red</p></div>
    <div class="item blue"><p>Blue</p></div>
    <div class="item green"><p>Green</p></div>
    <div class="item yellow"><p>Yellow</p></div>
    <div class="item red"><p>Red</p></div>
    <div class="item blue"><p>Blue</p></div>
    <div class="item green"><p>Green</p></div>
    <div class="item yellow"><p>Yellow</p></div>
    <div class="item red"><p>Red</p></div>
    <div class="item blue"><p>Blue</p></div>
    <div class="item green"><p>Green</p></div>
    <div class="item yellow"><p>Yellow</p></div>
    <div class="item red"><p>Red</p></div>
    <div class="item blue"><p>Blue</p></div>
    <div class="item green"><p>Green</p></div>
    <div class="item yellow"><p>Yellow</p></div>
    <div class="item red blue"><p>Blue/Red</p></div>
</div>

CSS

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

#container {
    border: 1px solid;
    padding: 3px;
    margin:10px 0;
}

.item {
    width: 70px;
    height: 70px;
    margin: 3px;
    float: left;
}

.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.yellow { background: yellow; }

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
    opacity:0;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
    transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    transition-duration: 0s;
}

/* End: Recommended Isotope styles */

JavaScript

$(function() {
    var $container = $('#container'),
        filters = {};
  
    $container.isotope({
        itemSelector: '.item'
    });

    // filter buttons
    $('#filters a').click(function() {
        var $this = $(this);
        // don't proceed if already selected
        if ($this.hasClass('selected')) {
            return;
        }
        var $optionSet = $this.parents('#option-set');
        // change selected class
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
        // store filter value in object
        // i.e. filters.color = 'red'
        var group = $optionSet.attr('data-filter-group');
        filters[group] = $this.attr('data-filter-value');
        // convert object into array
        var isoFilters = [];
        for (var prop in filters) {
            isoFilters.push(filters[prop])
        }
        var selector = isoFilters.join('');
        $container.isotope({
            filter: selector
        });
        return false;
    });


    $('input#discussion-search').quicksearch('#container .item', {
        'show': function() {
            $(this).addClass('quicksearch-match');
        },
        'hide': function() {
            $(this).removeClass('quicksearch-match');
        }
    }).keyup(function() {
        setTimeout(function() {
            $container.isotope({
                filter: '.quicksearch-match'
            }).isotope();
        }, 100);
    });

});