filter tabs

by aaronk85

HTML

<div id="nav">
    <a rel="all" class="current" id="sn-all">All</a>
    <a rel="red" id="sn-red" class="">red</a>
    <a rel="green" id="sn-green" class="">green</a>
    <a rel="black" id="sn-black" class="">black</a>
</div>
<ul id="search">
    <li class="item all red">red</li>
    <li class="item all green">green</li>
    <li class="item all black">black</li>
    <li class="item all red">red</li>
    <li class="item all green">green</li>
    <li class="item all black">black</li>
    <li class="item all red">red</li>
    <li class="item all green">green</li>
    <li class="item all black">black</li>
    <li class="item all red">red</li>
    <li class="item all green">green</li>
    <li class="item all black">black</li>
    <li class="item all red">red</li>
    <li class="item all green">green</li>
    <li class="item all black">black</li>
    <li class="item all red">red</li>
    <li class="item all green">green</li>
    <li class="item all black">black</li>
    <li class="item all red">red</li>
    <li class="item all green">green</li>
    <li class="item all black">black</li>
    <li class="item all red">red</li>
    <li class="item all green">green</li>
    <li class="item all black">black</li>
    <li class="item all red">red</li>
    <li class="item all green">green</li>
    <li class="item all black">black</li>
    <li class="item all red">red</li>
    <li class="item all green">green</li>
    <li class="item all black">black</li>
    <li class="item all red">red</li>
    <li class="item all green">green</li>
    <li class="item all black">black</li>
    <li class="item all red">red</li>
    <li class="item all green">green</li>
    <li class="item all black">black</li>
    <li class="item all red">red</li>
    <li class="item all green">green</li>
    <li class="item all black">black</li>
    <li class="item all red">red</li>
    <li class="item all green">green</li>
    <li class="item all black">black</li>
    <li class="item all red">red</li>
    <li...

CSS

.red {
    color: red;
}
.green {
    color: green;
}
.black {
    color: black;
}
a {
    cursor: pointer;
    text-decoration: underline;
}

JavaScript

jQuery(function () {

    var myChoice = "";

    jQuery("#nav a").on("click", function (event) {
        
        jQuery("#search-res").fadeTo(200, 0.10);
        
        jQuery("#nav a").removeClass("current");
        jQuery(this).addClass("current");

        myChoice = jQuery(this).attr("rel");

        jQuery(".item").not("." + myChoice).slideUp();
        jQuery("." + myChoice).slideDown();
        jQuery("#search-res").fadeTo(600, 1);
    });

});

console.log(jQuery("#search li").length);