JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<ul id="catList">
    <li class="active" id="all">All</li>    
    <li id="cat1">Cat 1</li>
    <li id="cat2">Cat 2</li>
    <li id="cat3">Cat 3</li>
    <li id="cat4">Cat 4</li>
    <li id="cat5">Cat 5</li>
</ul>
<ul id="deedList">
    <li class="cat1">O: Setup 2nd repository</li>
    <li class="cat2">SHU: YouTube video presentation on ipad</li>
    <li class="cat3">TOBY: deadline 9 Jan, 500 (black drop-down style...)</li>
    <li class="cat4">Nordea final meeting</li>
    <li class="cat5">Newman oblozhka</li>
    <li class="cat1">O: Facebook block in settings (both versions)</li>
    <li class="cat1">O: Contact button next to ordinem - © 2012 Ordinem | Contact</li>
    <li class="cat1">O: Chrome addon for IE http://code.google.com/chrome/chromeframe/</li>
    <li class="cat1">O:BUG "Keep me signed in" is not unchecked correctly when the user signs out.</li>
    <li class="cat1">O: Dynamic help for deed main list</li>
    <li class="cat2">O: Contact us footer popup</li>
    <li class="cat3">O: datepicker for iPad for the next version</li>
    <li class="cat2">O: Scroll event for hour sliders</li>
    <li class="cat2">O: Add priority color for mail templates</li>
    <li class="cat2">SHU: DK - BUG - http://clip2net.com/s/1ttK9 дебет с кредитом не сходятся...</li>
    <li class="cat5">O: deploy ksumvbpcrovxwerg</li>
    <li class="cat4">SHU: DK - Facebook sharing does not work in FF</li>
    <li class="cat4">SHU: DK - M - followers does not load up in profile before refresh</li>
    <li class="cat4">O: Jquery datepickers update tooltip problem with IE</li>
    <li class="cat3">SHU: dev | CylaUpa8CymuLabi</li>
    <li class="cat3">O: Move all JS Texts to var texts = {} array</li>
    <li class="cat5">O: [Chrome] Need to click twice on a deed in order to open a deed from a search result list. (Note: this happens when you click on the description only.)</li>
    <li class="cat5">SHU: Replay template for vadim</li>
    <li class="cat2">OS: Флаги стран...

CSS

ul {list-style-type:none;overflow:hidden;}
ul li {display:block;overflow:hidden;height:20px;line-height:20px;}
#catList {width:100px;float:left;margin-right:30px;}
#catList li {border:solid 1px #aaa;padding: 2px 5px;}
#catList li:hover {background:#ccc;cursor:pointer;}
#catList li.before {background:#aaa;}
#catList li.after {background:#efefef;}
#catList li.active {color:#fff;background:#000;}

#deedList li {border:solid 1px #aaa;padding: 2px 5px;}
#deedList li:hover {background:#ccc;}

#debug {clear:both;}

JavaScript

$(function() {
    $('#catList li').click(function(){
        listing.select( $(this).attr('id'));
    })
});

var listing = {
    select: function(category) {
        if (!listing.precess && listing.curCat.attr('id') != category) {
            listing.curCat = $('#' + category);
            /* CAT LIST SWITCH */        
            $(listing.cats + ' li').each(function(){
                $(this).removeAttr('class');
                if ($(this).index() < listing.curCat.index()) {
                    $(this).addClass('before');
                } else {
                    $(this).addClass('after');
                }
            });
            listing.curCat.addClass('active');
            /* DEEDS LIST SORT */
            if (category == 'all') {
                $(listing.list + ' li:hidden').slideDown(300);
            } else {
                $(listing.list + ' li').each(function(){
                    if($(this).is('.'+category)) {
                        listing.n++;                
                        $(this).css('background','lime').slideDown(300);
                    } else {
                        $(this).css('background','red').slideUp(300);                
                    }
                })
            }
            $('#debug').text('');
        } else {
            //alert('...')
        }
    },
    process: false,
    index: 0,
    list: '#deedList',
    cats: '#catList',    
    curCat: $('#catList li:first-child')

}