Filter Practise

by secretgspot

HTML

<ul id="filters">
    <li><a class="all" href="#">All</a></li>
    <li><a class="cat1" href="#">Category 1</a></li>
    <li><a class="cat2" href="#">Category 2</a></li>
    <li><a class="cat3" href="#">Category 3</a></li>
</ul>
<ul id="results">
    <li class="cat2">2</li>
    <li class="cat1">1</li>
    <li class="cat3">3</li>
    <li class="cat3">3</li>
    <li class="cat1">1</li>
    <li class="cat2">2</li>
    <li class="cat1">1</li>
    <li class="cat1">1</li>
    <li class="cat2">2</li>
    <li class="cat3">3</li>
    <li class="cat1">1</li>
    <li class="cat2">2</li>
    <li class="cat3">3</li>
    <li class="cat2">2</li>
    <li class="cat3">3</li>
    <li class="cat1">1</li>
</ul>

CSS

body {
    font-size: 0;
    padding: 2px;
}
ul {
    list-style: none;
}
li {
    display: inline-block;
}
a {
    background: #ccc;
    border: 2px solid #fff;
    color: #fff;
    display: block;
    font: bold 16px/25px sans-serif;
    padding: 5px 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 204px;
}
a:hover {
    background: #aaa;
}
#results li {
    border: 2px solid #fff;
    color: #fff;
    display: inline-block;
    font: bold 50px/1 sans-serif;
    height: 100px;
    line-height: 100px;
    text-align: center;
    width: 100px;
}
li.cat1 {
    background: #ccf;
}
li.cat2 {
    background: #cfc;
}
li.cat3 {
    background: #fcc;
}

JavaScript

var $a = $('#filters a'),
    $div = $('#results li');

$a.click( function(e) {
    e.preventDefault();
    var $that = $(this);
    $div.each( function() {
        $(this).css('display', 'inline-block');
        var $class = $(this).attr('class');
        if($that.attr('class') === $class) {
            return true;
        } else if($that.attr('class') === 'all') {
            return true;
        } else {
            $(this).css('display', 'none');
        }
    });
});