Simplify a jQuery function for multiple elements

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(functi开发者_Python百科on(){
    $project4.fadeToggle("slow");
    $project3.hide();
});
$('a.previous3').click(function() {
    $project2.fadeToggle();
    $project3.hide();
});

Any help will be very appreciated. Thanks in advance.

---

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.

---

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.

---

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");

    });  
});