Creating a “Filterable” Portfolio with jQuery
Tutorial Details
- Technology: jQuery, CSS
- Difficulty: Intermediate
- Completion Time: 1-2 hours
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.
1. The Markup
Our portfolio is nothing more than a simple unordered list:
<ul id="portfolio"> <li><a href="#"><img src="images/a-list-apart.png" alt="" height="115" width="200" />A List Apart</a></li> <li><a href="#"><img src="images/apple.png" alt="" height="115" width="200" />Apple</a></li> <li><a href="#"><img src="images/cnn.png" alt="" height="115" width="200" />CNN</a></li> <li><a href="#"><img src="images/digg.png" alt="" height="115" width="200" />Digg</a></li> <li><a href="#"><img src="images/espn.png" alt="" height="115" width="200" />ESPN</a></li> <li><a href="#"><img src="images/facebook.png" alt="" height="115" width="200" />Facebook</a></li> <li><a href="#"><img src="images/google.png" alt="" height="115" width="200" />Google</a></li> <li><a href="#"><img src="images/netflix.png" alt="" height="115" width="200" />Netflix</a></li> <li><a href="#"><img src="images/nettuts.png" alt="" height="115" width="200" />NETTUTS</a></li> <li><a href="#"><img src="images/twitter.png" alt="" height="115" width="200" />Twitter</a></li> <li><a href="#"><img src="images/white-house.png" alt="" height="115" width="200" />White House</a></li> <li><a href="#"><img src="images/youtube.png" alt="" height="115" width="200" />YouTube</a></li> </ul>
Note: I was by no means a part of creating these wonderful sites; I am just using them as examples.
2. 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:
<ul id="portfolio"> <li class="cms integration"> <a href="#"><img src="images/a-list-apart.png" alt="" height="115" width="200" />A List Apart</a> </li> <li class="integration design"> <a href="#"><img src="images/apple.png" alt="" height="115" width="200" />Apple</a> </li> <li class="design development"> <a href="#"><img src="images/cnn.png" alt="" height="115" width="200" />CNN</a> </li> <li class="cms"> <a href="#"><img src="images/digg.png" alt="" height="115" width="200" />Digg</a> </li> <li class="design cms integration"> <a href="#"><img src="images/espn.png" alt="" height="115" width="200" />ESPN</a> </li> <li class="design integration"> <a href="#"><img src="images/facebook.png" alt="" height="115" width="200" />Facebook</a> </li> <li class="cms information-architecture"> <a href="#"><img src="images/google.png" alt="" height="115" width="200" />Google</a> </li> <li class="integration development"> <a href="#"><img src="images/netflix.png" alt="" height="115" width="200" />Netflix</a> </li> <li class="information-architecture"> <a href="#"><img src="images/nettuts.png" alt="" height="115" width="200" />NETTUTS</a> </li> <li class="design information-architecture cms"> <a href="#"><img src="images/twitter.png" alt="" height="115" width="200" />Twitter</a> </li> <li class="development"> <a href="#"><img src="images/white-house.png" alt="" height="115" width="200" />White House</a> </li> <li class="cms design"> <a href="#"><img src="images/youtube.png" alt="" height="115" width="200" />YouTube</a> </li> </ul>
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:
<ul id="filter"> <li class="current"><a href="#">All</a></li> <li><a href="#">Design</a></li> <li><a href="#">Development</a></li> <li><a href="#">CMS</a></li> <li><a href="#">Integration</a></li> <li><a href="#">Information Architecture</a></li> </ul>
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.
- 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.
- You can use a similar technique from my last tutorial: setting a parameter in the url.
- You could always just write in the navigation with JavaScript before the portfolio items:
$(document).ready(function() { $('ul#portfolio').before('<ul id="filter"><li class="current"><a href="#">All</a></li><li><a href="#">Design</a></li><li><a href="#">Development</a></li><li><a href="#">CMS</a></li><li><a href="#">Integration</a></li><li><a href="#">Information Architecture</a></li></ul>'); });
Ok, you’ve got my notes on accessibility, so don’t criticize me for not thinking about it.
3. 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’t not forget about our friend IE6. Once you start clicking through some of the filters, the layout gets a little crazy.

From what I can tell, it is the dreaded IE Double Margin bug. I tried applying display: inline to the list items once they are filtered, but that didn’t seem to fix it. So my best solution was to just halve the right margin:
ul#portfolio li { margin-right: 5px; }
We are of course only going to serve this IE6 specific stylesheet using conditional comments:
<!--[if lt IE 7]> <link href="stylesheets/screen-ie6.css" type="text/css" rel="stylesheet" media="screen,projection" /> <![endif]-->
Yeah, it doesn’t look as good, but you know what: I don’t care. If you are using IE6, you deserve it.
4. The jQuery
Ok, now that we have the markup and CSS all done, let’t get to the important part of this tutorial: the JavaScript.
We are going to start by including the latest version of jQuery in the head of our document.
<script type="text/javascript" src="scripts/jquery.js"></script>
Next, we want to execute our code once the document is loaded.
$(document).ready(function() {
});
Now, we don’t want to do anything until one of our categories is clicked. We also want to make sure that we do not follow the href value of the link, so we need to return false:
$('ul#filter a').click(function() {
return false;
});
Once a category link is clicked, I want to do a couple of things: remove the outline on the clicked link, remove the class of current on the list item that has it, and add the class of current on the parent of the clicked link:
$(this).css('outline','none');
$('ul#filter .current').removeClass('current');
$(this).parent().addClass('current');
Next, we want to get the text inside of the clicked link, convert it to lowercase, and replace any spaces with hyphens (just like before when we were creating the category classes):
var filterVal = $(this).text().toLowerCase().replace(' ','-');
The first case of the script is when the All link is clicked. When that is clicked, we want to show all of the portfolio items and remove the class of hidden:
if(filterVal == 'all') {
$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
}
Otherwise, one of the actual categories were clicked. So we want to go through each portfolio item and check to see if it has the class that equals the value of the category clicked. If it does not have the class, we want to fade out the list item and add a class of hidden. It it does have the class, we want to fade it in and remove the class of hidden:
else {
$('ul#portfolio li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
The Finished Script
Let’s take a look at the entire script:
$(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;
});
});
Some people may not like the effect, but I think it looks pretty cool how they all kind of dance around. This is definitely not the only way to accomplish something like this, and it could easily be built on to do other things.
This technique is actually evolved from the coding that I did for my company’s portfolio.
5. One Quick Note
You may have noticed that I was adding and removing the class of hidden on the items as I was toggling the visibility. While I didn’t end up doing anything with the class, I try and make it a habit to add and remove classes to denote the state they are in. You may not use it immediately, but it can provide a hook for you do stuff with in the future.
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.









jQuery Lightbox Evolution only $12.00
Events Calendar Pro - Wordpr ... only $30.00 
How would i link to a section? For example, say from my home page i wanted to link directly to the “design” section?
I don’t think anyone offered an answer to this but can someone explain how to link to a certain displayed category from an external page?
E.G. jumping straight to the ‘design’ ones being shown rather than to the default ‘all’.
I think I may have worked this out myself(?) I believe it should work if your links text matches (e.g.) ‘design’ and you link to the page with a hash;
href=”index.html#” ..I think.
Nope, still can’t figure it – anyone help?
in that code it’s impossible.. To make it possible you would have to modify it a bit… It can be done using the “#” and anchor links, I think. I and a friend used this technique to make possible the use of the history.back (and consequently the browsers back button) in pages loaded via ajax.
I would have to think more about it… If I come to actually use it and figure the way out, I’ll post the solution.
hey i was just wondering..is there any way to remove the outline around the images? I don’t have any text so there isn’t an outline there but there’s always that grey outline
…I’ve tried deleting all different sections of the files but still can’t find it.
man, just remove the border from the css u.u”
has anyone solved how to escape/replace special characters on this… also, if i go more than 3 words on the main list, the portfolio UL does not switch.
Awsome… I`ll be using it in my personal site.
Thanks
It’s really nice. i try it in my portfolio too.. If the content can make it in pagination should be nice. Because of when i refresh the page will show All item.. but the Item too long. But anyway this is really nice, Thanks a lot.
The best part about this:
Yeah, it doesn’t look as good, but you know what: I don’t care. If you are using IE6, you deserve it.
Epic.
Thanks and F.U. IE6 users.
Hi there, I am using this script for my photography portfolio, but i have a little prob.
At the entry I want to show just one category, not the whole thing. Is this possible in any way?
It would be very nice, if you have an answer for me.
greetings,
michael
(link of the page above)
so what are u using for a trigger? I see you defined your categories but i’m not seeing how you tied them back together. Can you assist?
go it figured out. Thanks.
grt post:)
Is it possible to do this with divs?
I’m using masonry for layout, and would like to filter the div items.
Thoughts?
Unfortunately this does not work with easy-list-splitter. It will only work with the first column but not the others. Shucks…
Great tutorial!
Though I am unsure as to how I could rename CMS to say – Web? I know I can rename the link how how do I get it to work if I change the class name in the list. Make sense?
Maybe I missed something in the tutorial.
Thanks
It doesn’t work with jquery-1.4.2.min.js.
Any ideas why?
Has anyone figured out a way to make this work with Lightbox? Once the lightbox JS files are referenced, the filters no longer work on the page.
I am also having trouble integrating the lightbox script. When I add the script, the filtering links don’t work anymore
Can anyone help? I see that Travis managed to get it working on his website… can we have a look at the code?
This is a great tutorial by the way! Can you direct me or give me a hint how to simply dim out the thumbs that are not part of the sorting process instead of disappearing. I want my users to be able to still see the other thumbs there and only sort by dimming them. Make sense?
Hi,
Great tutorial,
I would like to know how to do a couple of things:
How do open it so it the first page displays a speciifed category and not all items?
How can assign mulitple classes to each category, so I can show specific items across mulitple categories within it’s own category?
Any help on this matter would be greatly apreciated.
thank you
Any idea how to add one portfolio item to multiple categories and have it sort correctly?
The replace(‘ ‘,’-'); function only replaces the first space and not all of them with hyphens. How do you fix this?
Filtering with Masonry!
http://www.kenya-schools.com/
excellent , i’ve just added to my script list
http://www.ajaxshake.com
regards
Hi,
how to put this all in a wordpress post ? Made the images of games and a link to the game.
Sorry my english is bad
I’m trying to set this up with wordpress, but I’m getting “$ is not a function” line 75 in the code.
Thoughts?
You need to replace the “$” with “jQuery”. WordPress uses the dollar sign symbol for one of its own internal libraries, so you need to type out jQuery instead instead of using the shortcut.
It’s a great way to show your portfolio. You can even add something like lightbox to make it really pop. For anyone looking at adding that, use a jQuery replica like ShadowBox and it will work perfectly.
Guys Is there is a way to change the link on each item depending on the category selected.
because i want to show just one icon and i have two types of websites for them. so depending on which category they selected, i want it to show a link. can some help me here.
Thanks so much for posting this, I tweaked the effects and will use it on my portfolio. Should be within 12 days!
http://www.domanique.com