Simplify a jQuery function for multiple elements - abstraction

Question

I'm working on my new portfolio and I have a list of projects which are using show and hide functions. In my case, I'wrote the code for each project, but is it very repetitive. So I would like to know if there's a technique to write the same function for each project.
Here is my jquery code:
$project1.hide();
$("a.show_hide_project1").show();
$('a.show_hide_project1').click(function() {
$project1.delay(100).slideToggle("slow");
$project2.hide(); $project3.hide(); $project4.hide(); $project5.hide();
$project6.hide(); $project7.hide(); $project8.hide(); $project9.hide();
$project10.hide();$project11.hide(); $project12.hide();
});
$('a.next1').click(function() {
$project2.fadeToggle("slow");
$project1.delay(600).hide();
});
$project2.hide();
$("a.show_hide_project2").show();
$('a.show_hide_project2').click(function() {
$project2.delay(100).slideFadeToggle("slow");
$project1.hide(); $project3.hide(); $project4.hide(); $project5.hide();
$project6.hide(); $project7.hide(); $project8.hide(); $project9.hide();
$project10.hide();$project11.hide(); $project12.hide();
});
$('a.next2').click(function() {
$project3.fadeToggle("slow");
$project2.hide();
});
$('a.previous2').click(function(){
$project1.fadeToggle();
$project2.hide();
});
$project3.hide();
$("a.show_hide_project3").show();
$('a.show_hide_project3').click(function() {
$project3.delay(100).slideFadeToggle("slow");
$project2.hide(); $project1.hide(); $project4.hide(); $project5.hide();
$project6.hide(); $project7.hide(); $project8.hide(); $project9.hide();
$project10.hide();$project11.hide(); $project12.hide();
});
$('a.next3').click(function(){
$project4.fadeToggle("slow");
$project3.hide();
});
$('a.previous3').click(function() {
$project2.fadeToggle();
$project3.hide();
});
Any help will be very appreciated.
Thanks in advance.

Answer 1

Here's a quick stab at it: http://jsfiddle.net/Jj2Q7/1/
The animations are not exactly as you have it, and I doubt if that's the most efficient way to do it, but hopefully it'll serve as a starting point.
Update
Here's another version which makes liberal use of data attributes: http://jsfiddle.net/Jj2Q7/3/
It should be faster than the previous, but relies on the HTML tags having the right attributes set.

Answer 2

First off, you should probably be leveraging a common css class to select all of them
$('.projectItem').click(function () {
$('.projectItem').hide(); //hide them all
$(this).delay(100).slideFadeToggle("slow"); //then show the one being clicked.
});
Where your Html would look more like this.
<div class="projectItem" id="project1"/>
<div class="projectItem" id="project2"/>
<div class="projectItem" id="project3"/>
<div class="projectItem" id="project4"/>
Just a really rough idea.

Answer 3

Basically you need to give your HTML a sort of class that makes it identifiable as a "project" , and add some rel or data attribute to the individual projects
Your code then translates to something like this: (depending on your HTML , may vary)
$(function(){
$(".project").hide();
$("a.show_hide_project").show();
$('a.show_hide_project').click(function(){
$(".project").hide();
$(".project[rel="+$(this).attr('rel')+"]").delay(100).slideFadeToggle("slow");
});
});