$(document).ready(function(){ var items = $('#container .mod_newslist li'), itemsByTags = {}; // Looping though all the li items: items.each(function(i){ var elem = $(this), tags = elem.data('tags').split(','); // Adding a data-id attribute. Required by the Quicksand plugin: elem.attr('data-id',i); $.each(tags,function(key,value){ // Removing extra whitespace: value = $.trim(value); if(!(value in itemsByTags)){ // Create an empty array to hold this item: itemsByTags[value] = []; } // Each item is added to one array per tag: itemsByTags[value].push(elem); }); }); // Creating the "Everything" option in the menu: createList('Everything',items); // Looping though the arrays in itemsByTags: $.each(itemsByTags,function(k,v){ createList(k,v); }); $('#portfolio_filter').on('click', 'a', function(e){ var link = $(this); link.addClass('active').siblings().removeClass('active'); // Using the Quicksand plugin to animate the li items. // It uses data('list') defined by our createList function: $('#container .mod_newslist').quicksand(link.data('list').find('li')); e.preventDefault(); }); $('#portfolio_filter a:first').click(); function createList(text,items){ // This is a helper function that takes the // text of a menu button and array of li items // Creating an empty unordered list: var ul = $('