Problema con script tabella/menu a scomparsa

[CasAmicaMia]

Ciao a tutti, sono autodidatta per questo chiedo il vostro gentile aiuto! Ho uno script che mi piace molto e vorrei utilizzarlo nel mio sito ma ho un problema, lo script funziona benissimo applicato ad una sola scritta o immagine, clicco per far apparire la descrizione ed appare, riclicco per farla scomparire e scompare... il problema nasce nel momento in cui voglio applicare lo script anche su una seconda scritta o immagine, se clicco sulla seconda immagine non si applica lo script sulla seconda ma sulla prima immagine e non so davvero come fare! Sicuramente mancano dei richiami o delle stringhe, io ci ho provato ma non ci sono riuscita!!! Vi incollo tutto così se qualcuno mi può aiutare vi ringrazio di cuore!

Questa è la parte che va incollata nel HEAD

<style type="text/css">
body{font: 76% Verdana, Arial, sans-serif}
a{color: #00f}
div#commenti{display:none}
div#commenti p{width: 450px;padding: 10px 0;
border:1px solid #68B0D8;background-color: #C8ECFF}
</style>
<script type="text/javascript">
function ShowAndHide(id1,id2){
if(document.getElementById){
el1=document.getElementById(id1);
el2=document.getElementById(id2);
if(el1.style.display=="none"){
el1.style.display="block";
el2.style.display="none";
}
else{
el1.style.display="none";
el2.style.display="block";
}
}
}
</script>

Questa è la parte che va incollata nel BODY


<table style="margin-top: 12; margin-bottom: 8" border="0" cellpadding="0" cellspacing="0" width="606" height="70">
<tbody>
<tr bgcolor="#FFFFCC">
<td valign="top" width="105" height="45"> <img alt="Mandaranci" src="mandaranci.jpg" border="0" height="70" width="100"></td>

<td valign="top" height="45" width="501">
<font style="font-size: 9pt" face="Verdana"><b> Mandaranci e Clementine </b></font>
<table width="48%">
<tr>
<div id="mostra">
<p><a href="#" onclick="ShowAndHide('mostra','commenti');return(f alse)"><img src="descrizione-leggitutto-ok.jpg" width="235" height="33"></a> </p>
</div>
<div id="commenti"><br>
<a href="#" onclick="ShowAndHide('mostra','commenti');return(f alse)"><img src="chiudi-finestra.gif" width="101" height="20"></a>
<p>Il mandarancio e' un frutto nato dalla fusione tra il mandarino e l'arancio,
ha l'aspetto del mandarino e l'aroma un mix dei due.
</p>
</div>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

<tbody>
<tr bgcolor="#FFFFCC">
<td valign="top" width="105" height="45">
<table style="margin-top: 12; margin-bottom: 8" border="0" cellpadding="0" cellspacing="0" width="606" height="70">
<tbody>
<tr bgcolor="#FFFFCC">
<td valign="top" width="105" height="45"> <img alt="Pere" src="pere.jpg" border="0" height="70" width="100"></td>
<td valign="top" height="45" width="501"> <font style="font-size: 9pt" face="Verdana"><b> Pere </b></font>
<table width="48%">
<tr>
<div id="mostra">
<p><a href="#" onClick="ShowAndHide('mostra','commenti');return(f alse)"><img src="descrizione-leggitutto-ok.jpg" width="235" height="33"></a>
</p>
</div>
<div id="commenti"><br>
<a href="#" onClick="ShowAndHide('mostra','commenti');return(f alse)"><img src="chiudi-finestra.gif" width="101" height="20"></a>
<p>Le proprieta' benefiche della pera sono diverse. Innanzi
tutto essa costituisce un frutto facilmente digeribile e,
quindi, e' indicato nell'alimentazione sia dei
bambini che degli anziani.
</p>
</div>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

Se provate ad incollare in una pagine html le strighe vedrete che nella prima tabella lo script funziona perfettamente, nella seconda invece no ma si applica sempre alla prima!

Grazie!!!!!

[cavicchiandrea]

Ciao e benvenuta.
Quanti id commenti/mostra hai nel documento?
La prerogativa di un id è che deve essere?
Lo script si applica solo al primo perché è...?

[CasAmicaMia]

Ciao grazie!!! Bhe di id ne ho diversi perchè devo inserire per ogni mese dell'anno la frutta e la verdura disponibile nel relativo mese quindi è un dato che varia da pagine a pagina! Ma quello non è un problema nel senso che posso poi fare io le modifiche aggiungendo o togliendo gli id, il problema è proprio che non so e non capisco dove devo modificare, come si fa

[marino51]

per prima cosa hai 4 "return (f alse)" ovvero uno spazio di troppo dopo la f

questa la mia modifica per i mandaranci, le altre pensaci tu

 div#c1{display:none}
 div#commenti{display:none}

<font style="font-size: 9pt" face="Verdana"><b> Mandaranci e Clementine </b></font> 
 <table width="48%">
  <tr> 
   <div id="m1">
    <p>
     <a href="#" onclick="ShowAndHide('m1','c1');return(false)">
       <img src="descrizione-leggitutto-ok.jpg" width="235" height="33">
     </a>
    </p>
   </div>
   <div id="c1"><br>
    <a href="#" onclick="ShowAndHide('m1','c1');return(false)">
     <img src="chiudi-finestra.gif" width="101" height="20">
    </a>
    <p>Il mandarancio e' un frutto nato dalla fusione tra il mandarino e l'arancio, 

già modificando questa parte i due commenti agiscono separatamente

[CasAmicaMia]

Ciao marino51 grazie mille per il tuo aiuto, ti volevo chiedere perfavore la cortesia di farmelo anche per le pere così capisco dove devo modificare per rendere indipendente lo script e quali sono le parti da modificare! Grazie infinite!!!!

[marino51]

non ho fatto molto,

hai inserito "mostra" e "commenti" per entrambi i frutti,
io ho inserito

div#c1{display:none}

e poi per i mandaranci ho differenziato "m1" e "c1"

senza impazzire troppo potresti avere div diversi m1, m2, m3 .... c1, c2, c3 ....
per quanti frutti ti servono usando una coppia diversa per ciascun frutto

avendo lasciato le pere non modificate, puoi vedere la differenza

sufficiente ?

[CasAmicaMia]

Grazie marino51 sei stato fantastico!!! Ho provato a differenziare e direi che funziona!
Ho fatto così!!!

Nello style ho messo

div#c1{display:none}
div#c1 p{width: 450px;padding: 10px 0; border:1px solid #68B0D8;background-color: #C8ECFF}
div#c2{display:none}
div#c2 p{width: 450px;padding: 10px 0; border:1px solid #68B0D8;background-color: #C8ECFF}

Nel body ho messo così...

per il mandarancio:

<table width="48%">
<tr>
<div id="m1">
<p><a href="#" onclick="ShowAndHide('m1','c1');return(false)"><im g src="descrizione-leggitutto-ok.gif"></a> </p>
</div>
<div id="c1"><br>
<a href="#" onclick="ShowAndHide('m1','c1');return(false)"><im g src="chiudi-finestra.gif" width="101" height="20"></a>
<p>Il mandarancio e' un frutto nato dalla fusione tra il mandarino e l'arancio


Per la pera ho messo:

<table width="48%">
<tr>
<div id="m2">
<p><a href="#" onClick="ShowAndHide('m2','c2');return(false)"><im g src="descrizione-leggitutto-ok.gif"></a>
</p>
</div>
<div id="c2"><br>
<a href="#" onClick="ShowAndHide('m2','c2');return(false)"><im g src="chiudi-finestra.gif" width="101" height="20"></a>
<p>Le proprieta' benefiche della pera sono diverse.

e così andrò avanti modificando le m e le c avanzando di numero!!! Messo così sembra che è OKKKKK sono troppo contenta!!!! Grazie infinite senza il tuo aiuto non sarei mai riuscita!!!!