Ecco qua

[HTML]
<div class="tabul">
<ul>
<li><a href="#" rel="voce1">Capra</a></li>
<li><a href="#" rel="voce2">Lemure</a></li>
<li><a href="#" rel="voce3">Zebra</a></li>
<br style="clear:both;" />
</ul>
</div>
<div class="tabsbob">
<div id="voce1">
<img src="capra.jpg" width="240" height="260" alt="Una capra simpatica" /><br />
<a href="#" class="slideUp">SlideUp</a>
</div>

<div id="voce2">
<img src="lemure.jpg" width="240" height="260" alt="Il lemure che medita" /><br />
<a href="#" class="slideUp">SlideUp</a>

</div>

<div id="voce3">
<img src="zebra.jpg" width="240" height="260" alt="La zebra sorridente" /><br />
<a href="#" class="slideUp">SlideUp</a>
</div>

</div>
[/HTML]

Ecco l'esempio funzionante (testato sul tuo HTML):

$(document).ready(function() {
    $('.tabsbob div').hide();
    $('.tabul a').each(function(){
        $(this).click(function(){
            var tabula = $(this).attr('rel');
            $('#' + tabula).slideDown();
        
            $('div#img-description').remove();
            var altImg = $('#'+tabula+' img').attr('alt');
            $('.tabsbob div').append('<div id="img-description">' +altImg+ '</div>');
            return false;
        });
    });
        
    $('a.slideUp').click(function(){
            $(this).parent().slideUp();
        });
});

In pratica con each (tradotto ogni) dai la funzione click per ogni '.tabul a'.

uhm, se ti dicessi che non ho capito?
riesci a spiegarmi meglio che cosa fa l'each ed in particolare nel mio caso? sono niubbo ma magari così imparo qualcosa di utile XD
cmq la modifica funziona solo che se ho i 3 tab aperti insieme continua a cambiarmi la descrizione

Nel caso in questione:
per ogni '.tabul a' (come se fosse un ciclo for) assegno la funzione all'evento click.

Anche prima i 3 tab erano aperti.
La descrizione non vuoi che cambi?

la descrizione deve essere univoca per ogni foto quando ho i 3 tab aperti simultaneamente

@gleenk said:

la descrizione deve essere univoca per ogni foto quando ho i 3 tab aperti simultaneamente
Prova cosi:

$(document).ready(function() {
    $('.tabsbob div').hide();
    $('.tabul a').each(function(){
        $(this).click(function(){
            var tabula = $(this).attr('rel');
            $('#' + tabula).slideDown();
        
            $('div#img-description_'+tabula).remove();
            var altImg = $('#'+tabula+' img').attr('alt');
            $('.tabsbob div').append('<div id="img-description_'+tabula+'">' +altImg+ '</div>');
            return false;
        });
    });
        
    $('a.slideUp').click(function(){
            $(this).parent().slideUp();
        });
});

nada de nada, si è impallinato tutto ^^
ho caricato online la pagina di prova così vedi bene che cosa intendo

gleenk.com/test/testtab.html

Non hai modificato come indicato nel mio ultimo post.
Ti evidenzio in grassetto le modifiche

$(document).ready(function() {
    $('.tabsbob div').hide();
    $('.tabul a').each(function(){
        $(this).click(function(){
            var tabula = $(this).attr('rel');
            $('#' + tabula).slideDown();
        
            **$('div#img-description_'+tabula).remove();**
            var altImg = $('#'+tabula+' img').attr('alt');
            **$('.tabsbob div').append('<div id="img-description_'+tabula+'">' +altImg+ '</div>');**
            return false;
        });
    });
        
    $('a.slideUp').click(function(){
            $(this).parent().slideUp();
        });
});

le ho provate in locale ma non andavano, saltava solo il css perchè modificavi la classe img-description
quindi ho rimesso com'era

riprovo sul file di prova e ti faccio sapere.
Riguardo al css del div con id img-description ricordati che in una pagina html gli id devono essere univoci.

Questo dovrebbe andare al 99%.
Riguardo al css applica al div img-description la classe omonima
modificando la regola da "#img-description" a ".img-description".

$(document).ready(function() {
    $('.tabsbob div').hide();
    $('.tabul a').each(function(){
        $(this).click(function(){
            var tabula = $(this).attr('rel');
            $('#' + tabula).slideDown();
        
            $('#img-description_'+tabula).remove();
            var altImg = $('#'+tabula+' img').attr('alt');
            $('.tabsbob #'+tabula).append('<div id="img-description_'+tabula+'" class="img-description">' +altImg+ '</div>');
            return false;
        });
    });
        
    $('a.slideUp').click(function(){
            $(this).parent().slideUp();
        });
});

evviva! così funziona! mi sto ancora chiedendo come faccia a funzionare... come fa ad identificare le immagini in modo univoco?

Perchè agisce per ogni '.tabul a', dunque per ogni id voceX (voce1, voce2, etc...), creando anche un div con id univoco 'img-description_'+tabula' (img-description_voce1, img-description_voce2, etc...).

scusa la mia ignoranza, ma mi sfugge ancora il nocciolo... in che punto del codice lui capisce che quell'immagine è associata al mio click su quella voce di menù senza confondersi con le altre?
nn riesco a capire... il div con ID img-description_ viene aggiunto alla fine del nostro codice e prima non c'è nulla che gli dica che quella "tabula" è proprio quella (che casino!).

PS: mi sa che mi sorge il dubbio che lo faccia perchè io ho creato 3 div con id diverso per le 3 voci (non avevo visto!), se non avessi fatto così? sarebbe stato impossibile?
grazie uomini pazienti ^^

@gleenk said:

scusa la mia ignoranza, ma mi sfugge ancora il nocciolo... in che punto del codice lui capisce che quell'immagine è associata al mio click su quella voce di menù senza confondersi con le altre?
nn riesco a capire... il div con ID img-description_ viene aggiunto alla fine del nostro codice e prima non c'è nulla che gli dica che quella "tabula" è proprio quella (che casino!).

Lo permette l'each

@gleenk said:

PS: mi sa che mi sorge il dubbio che lo faccia perchè io ho creato 3 div con id diverso per le 3 voci (non avevo visto!), se non avessi fatto così? sarebbe stato impossibile?
grazie uomini pazienti ^^
Si, ma sarebbe stato un po' più complicato