If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.

Creating a “Filterable” Portfolio with jQuery

The Markup

Our portfolio is nothing more than a simple unordered list:

	
A List Apart
	
Apple
	
CNN
	
Digg
	
ESPN
	
Facebook
	
Google
	
Netflix
	
NETTUTS
	
Twitter
	
White House
	
YouTube

Note: I was by no means a part of creating these wonderful sites; I am just using them as examples.

Categorizing the Portfolio

We are going to assume that our portfolio can be broken down into 5 categories:

• Design
• Development
• CMS
• Integration
• Information Architecture

In order to use the categories we have defined, we will convert them to lowercase and replace all spaces with hyphens:

• Design = design
• Development = development
• CMS = cms
• Integration = integration
• Information Architecture = information-architecture

We are going to assume that each portfolio item could be in one or many categories, so we are going to randomly add our newly created categories as classes to the list items:

	

	A List Apart
	
	

	Apple
	
	

	CNN
	
	

	Digg
	
	

	ESPN
	
	

	Facebook
	
	

	Google
	
	

	Netflix
	
	

	NETTUTS
	
	

	Twitter
	
	

	White House
	
	

	YouTube
	

Adding Category Navigation

Now that we have the portfolio pieces in place, we are going to need some way to navigate through them. Another unordered list should do:

	
All
	
Design
	
Development
	
CMS
	
Integration
	
Information Architecture

Since I want the default view of the portfolio to show All items, I have assigned a class of current to the first list item.

You will probably look at that and question me on the accessibility of this example. My thought is that you have 3 options to solve that problem.

1. When creating a portfolio like this, there is a strong probability that it will be database driven. Thus, you should be able to create a separate page for each category. So if a user does not have JavaScript enabled, they can go to the separate page with the filtered portfolio..
2. You could always just write in the navigation with JavaScript before the portfolio items:
   1. $(document).ready(function() {  
   2.     $('ul#portfolio').before('All
   3. Design
   4. Development
   5. CMS
   6. Integration
   7. Information Architecture
   ');  
   8. });  

   		$(document).ready(function() {
   	$('ul#portfolio').before('
   	
   
   		
   All
   		
   Design
   		
   Development
   		
   CMS
   		
   Integration
   		
   Information Architecture
   	
   	');
   	});
   	

Ok, you’ve got my notes on accessibility, so don’t criticize me for not thinking about it.

The CSS

This tutorial is not meant to be about CSS, so I’m going to run through the CSS pretty quickly.

I always start with some basic styles as a sort-of framework, so I’m not going to go over those styles right now. These styles basically just act as a reset and define some styling for basic elements.

To start, I just want to display the categories across the top horizontally with a border between each:

ul#filter {
float: left;
font-size: 16px;
list-style: none;
margin-left: 0;
width: 100%;
}
ul#filter li {
border-right: 1px solid #dedede;
float: left;
line-height: 16px;
margin-right: 10px;
padding-right: 10px;
}

Next, I want to remove the border from the last list item (in browsers that support it) and change the display of the links:

ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
ul#filter a { color: #999; text-decoration: none; }

I also want to make sure and differentiate the currently selected category:

ul#filter li.current a, ul#filter a:hover { text-decoration: underline; }
ul#filter li.current a { color: #333; font-weight: bold; }

Ok, now that we have the category navigation styled, let’s focus on the actual layout of the portfolio. Let’s plan on floating 3 list items next to each other with a border around each one:

ul#portfolio {
float: left;
list-style: none;
margin-left: 0;
width: 672px;
}
ul#portfolio li {
border: 1px solid #dedede;
float: left;
margin: 0 10px 10px 0;
padding: 5px;
width: 202px;
}

Now, we just need to add some basic styling for the images and links:

ul#portfolio a { display: block; width: 100%; }
ul#portfolio a:hover { text-decoration: none; }
ul#portfolio img { border: 1px solid #dedede; display: block; padding-bottom: 5px; }

Compensating for Internet Explorer 6

Of course, let’s not forget about our friend IE6. Once you start clicking through some of the filters, the layout gets a little crazy.