jQuery: responsive sortable portfolio

Creating a sortable portfolio is easy with jQuery. The core of our code is constituted by custom HTML5 data attributes that map the navigation links to the corresponding portfolio item. Then it's only a matter of selecting, showing and hiding portfolio items using these attributes.

We start with the following markup:

<div id="portfolio">
    <div id="portfolio-sort">
        <a href="#" id="all">ALL</a>
        <a href="#" data-cat="a">A</a>
        <a href="#" data-cat="b">B</a>
        <a href="#" data-cat="c">C</a>
    </div>
    <div id="portfolio-content">
        <div class="portfolio-item" data-cat="a">A</div>
        <div class="portfolio-item" data-cat="b">B</div>
        <div class="portfolio-item" data-cat="c">C</div>
        <div class="portfolio-item" data-cat="c">C</div>
        <div class="portfolio-item" data-cat="b">B</div>
        <div class="portfolio-item" data-cat="a">A</div>
        <div class="portfolio-item" data-cat="a">A</div>
        <div class="portfolio-item" data-cat="c">C</div>
        <div class="portfolio-item" data-cat="b">B</div>
    </div>
</div>
​

Each link has a custom data-cat attribute which corresponds to a specific group of portfolio items. Our CSS code is very simple:

#portfolio {
    width: 100%;
    max-width: 600px;
    margin: 2em auto;
}

#portfolio-sort {
    text-align: center;
    padding-bottom: 3px;
    border-bottom: 1px solid #999;
    margin-bottom: 1em;
}

#portfolio-sort a {
    color: #fff;
    background: #a00;
    display: inline-block;
    padding: 3px 9px;
    text-decoration: none;
    margin-right: 1em;
}

#portfolio-content {
    overflow: hidden;
}

div.portfolio-item {
    float: left;
    margin: 0 3% 1em 0;
    width: 29%;
    height: 10em;
    line-height: 10;
    text-align: center;
}

div[data-cat="a"] {
    background: #ccc;
}

div[data-cat="b"] {
    background: #666;
    color: #fff;
}

div[data-cat="c"] {
    background: #333;
    color: #fff;
}​

With jQuery we need to show all our items when you click on the first link and sort the remaining items by using the data-cat attribute. All the items that don't match the value of the current link's attribute will be faded out:

var Portfolio = {
    sort: function(items) {
        items.show();
        $('#portfolio-content').find('div.portfolio-item').not(items).fadeOut(500);
    },
    showAll: function(items) {
        items.fadeIn(500);
    },
    doSort: function() {
        $('a', '#portfolio-sort').on('click', function() {

            var $a = $(this);
            if (!$a.is('#all')) {

                var items = $('div[data-cat=' + $a.data('cat') + ']', '#portfolio-content');

                Portfolio.sort(items);

            } else {

                Portfolio.showAll($('div.portfolio-item', '#portfolio-content'));


            }

        });
    }
};

Portfolio.doSort();​

You can see the demo on this page.