Script only working for one div out of ten

Question

I have a script that makes my div fade out and fade into another div. The code works but I have 10 divs I want it to work for and right now it only works for the first div in order.

$('#content').click(function(e){    
$('#content').fadeOut('slow', function(){
    $('#backside').fadeIn('slow');
});
});

$('#backside').click(function(e){    
$('#backside').fadeOut('slow', function(){
    $(' #content').fadeIn('slow');
});
});

http://jsfiddle.net/3XwZv/981/

Answer 1

Use .prev() and .next() as well as classes (ids must be unique) to achieve the desired effect:

$('.content').click(function (e) {
   $(this).fadeOut('slow', function () {
        $(this).next().fadeIn('slow');
    });
});

$('.backside').click(function (e) {
   $(this).fadeOut('slow', function () {
        $(this).prev().fadeIn('slow');
    });
});

Here it is working: http://jsfiddle.net/3XwZv/983/