Dynamically filter a list of items.

filterable.jquery.js

var filters = {
  options: {
		container : "#filterable",
		controlContainer : '#filter',
		targetElem : 'li',
		controlElem : 'a',
		style : 'dim', // options: dim, hide
		dimmedOpacity : 0.5,
		duration : 300
	},
	
	init: function(options) {
		//allow custom options on init
		if (options && typeof(options) === 'object') {
			$.extend(filters.options, options);
		}

		filters.$container = $(filters.options.container);
		filters.$controls = $(filters.options.controlContainer);
		filters.$items = filters.$container.find($(filters.options.targetElem));
		filters.$filters = filters.$controls.find($(filters.options.controlElem)).click(filters.getFilter);
		filters.style = filters.options.style;
		filters.duration = filters.$duration;
	},

	getFilter : function(e) {
		e.preventDefault();
		
		if ($(this).hasClass('active')) {
			//clear all
			filters.clearFilters();
		} else {
			//clear any previous selection
			filters.clearFilters();
			//make a new selection
			$(this).addClass('active');
			filters.findItems($(this).attr('href').substring(1));
		}
	},
	findItems : function(itemClass) {
		filters.toggleItems(filters.$items.not('.' + itemClass));
	},
	toggleItems : function($unmatchedItems) {
		$unmatchedItems.each(function(){
			if (filters.style === "dim") {
				$(this).fadeTo(filters.duration, filters.options.dimmedOpacity);
			} else {
				$(this).hide(filters.duration);
			}
		});
	},
	clearFilters : function() {
		if (filters.style === "dim") {
			filters.$items.fadeTo(filters.duration * 0.3, 1);
		} else {
			filters.$items.show(filters.duration*0.3);
		}
		filters.$filters.removeClass('active');
	}
};