Question

I have created the layout for my new portfolio webpage here: http://vitaminjdesign.com/work.html

I want to have a legend with tags (ALL, logo design, marketing, web design, print design) and when these tags are clicked, the page filters the results and display them like they are currently displayed. At first, I want ALL projects displayed, but when the user clicks on a tag (say “print design”), the list is filtered and displayed.

If I have this as my legend: <a href="#" class="logos">logo</a>

and when logo is clicked, I want all of the div’s with the class “logos” to stay and all of the the divs with the other classes to fade out.

What is the easiest way in jquery to make this work. Please note: I am not very experienced with jquery, so please be as thorough and idiot-proof as possible.

Answer 1

First add the classes (logodesign, marketing, webdesign, printdesign) that apply to each project to the div your are assigning the numeric class to.

Then create links that are to filter for each tag like:

<a href='#' class="logodesign">Logo Design</a>

Then assign a click event that will hide the others and show the selected one.

var $projects = $('#projects');
$('a.logodesign').click(function() {
    hideAll();
    showTag('logodesign');
});
function showTag(tag){
    $projects.find('div.'+tag).stop(true).fadeIn();
}
function hideAll(){
    $projects.find('div.logodesign, div.marketing, div.webdeisgn, div.preintdesign').fadeOut();
}