Posted By

conspirator on 04/29/09

Tagged

Versions (?)

Last Edited at 04/29/09 10:26am

Statistics

Viewed 927 times

Favorited by 3 user(s)

Related snippets

jQuery Filterable Portfolio

/ Published in: jQuery

This is how NetTuts does their filterable Portfolio.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

$(document).ready(function() {
	$('ul#filter a').click(function() {
		$(this).css('outline','none');
		$('ul#filter .current').removeClass('current');
		$(this).parent().addClass('current');
 
		var filterVal = $(this).text().toLowerCase().replace(' ','-');
 
		if(filterVal == 'all') {
			$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
		} else {
 
			$('ul#portfolio li').each(function() {
				if(!$(this).hasClass(filterVal)) {
					$(this).fadeOut('normal').addClass('hidden');
				} else {
					$(this).fadeIn('slow').removeClass('hidden');
				}
			});
		}
 
		return false;
	});
});