jQuery - show/hide help

[nano]

Hello,

 

I have the following HTML markup:

 

<div class="filter">
<h3>Filter</h3>
<ul>
	<li><a href="#all" title="All">All</a></li>
	<li><a href="#brand" rel="brand" title="Brand">Branding</a></li>
	<li><a href="#iphone" rel="iphone" title="iPhone">iPhone</a></li>
	<li><a href="#web" rel="web" title="Web">Web</a></li>
</ul>
</div>
<div class="projects">
<div class="project iphone"></div>
<div class="project iphone"></div>
<div class="project web"></div>
<div class="project branding"></div>
</div>

 

What I want to do, is click on the filter parameters, and only show the content that it relates to.

 

So for example, clicking on iPhone, will only show the iPhone related projects.

 

Here is my jQuery:

 

$('.filter li a').click(function(){

$('.projects .project').fadeOut();

var content = $(this).attr('href');
var contentClass = content.substring(1,content.length);

if(contentClass == 'all') {
	$('.projects .project').fadeIn(); 
} else {
	$('.projects .project').hasClass(contentClass).fadeIn();
}
return false;

});

 

This currently doesn't work.. Does anyone understand how I can resolve this? Or maybe there is a better way to write what I am trying to do?

 

Cheers.

[michaellunsford]

I'd try this:

$('.projects .project.'+ contentClass).fadeIn();

 

http://api.jquery.com/class-selector/