Ciao a tutti,
sto cercando di fare una specie di accordion con questa tabella, vorrei che, cliccando sull'immagine nell'ultima colonna, si aprisse il dettaglio dell'utente figlio.asp, ma soltanto uno per volta.
Per aprire/chiudere lo stesso dettaglio non ho problemi, invece quando apro la prima riga e poi apro la seconda mi si chiude la prima ma la seconda non viene visualizzata.
Sbaglio qualcosa nella logica javascript in rosso ma non riesco a venirne a capo.
Le pagine sono le seguenti, ho eliminato tutto quello che non serve.
padre.asp
codice:
<html>
<head>
<style type="text/css">
IMG {cursor: pointer;}
</style>

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
        var dettaglioUtente = 0;
        var codUtente = 0;
        $('.img_dettaglioUtente').click(function(event) {
            codUtente = $(this).attr('id').replace("bDettaglioUtente","");
                        
            console.log("iniz"+ dettaglioUtente +"--"+ codUtente);
            if (dettaglioUtente == 0){            
                
                dettaglioUtente = codUtente;                
                
                if ($("#tr"+ codUtente).length == 0){
                    var dataOra = new Date();
                    var link_pagina = "figlio.asp?codUtente="+ codUtente +"&tipo=modifica";
                    
                    $(this).closest('tr').after('<tr id="tr'+ codUtente +'" ><td id="dettaglioUtente'+ codUtente +'" class="separatoreSotto" colspan="13"></td></tr>');
                    $("#tr"+ codUtente).hide();
                    
                    $.ajax({
                        cache: false,
                        type: "POST",
                        url: link_pagina,
                        data: "ora="+dataOra,
                        dataType: "html",
                        success: function(msg){                        
                            $("#dettaglioUtente"+ codUtente).html(msg);                        
                        },
                        error: function(msgE){ //request, status, error                            
                            $("#dettaglioUtente"+ codUtente).html("Si e' verificato l'errore durante l'aggiornamento: "+ msgE.responseText);                            
                        }
                    });
                    
                    $("#tr"+ codUtente).show().animate({height:200},200);                
                } else {
                    $("#tr"+ codUtente).animate({height:0},400).hide().remove();  //non serve più        
                }
                
            } else {
                //devo chiudere il vecchio dettaglio                
                
                if (dettaglioUtente == codUtente){
                    $("#tr"+ codUtente).animate({height:0},400).hide().remove();
                    dettaglioUtente = 0;
                    
                } else if (dettaglioUtente != codUtente){                    
                    $("#tr"+ dettaglioUtente).animate({height:0},400).hide().remove();
                    oldUt=codUtente;
                    dettaglioUtente = codUtente;
                    codUtente = 0;
                    
                    console.log("mezz"+ dettaglioUtente +"--"+ codUtente);
                    
                    $("#bDettaglioUtente"+ oldUt).trigger("click");                    
                    //$('.img_dettaglioUtente').trigger("click");
                    
                }
                
            }
            console.log("fine"+ dettaglioUtente +"--"+ codUtente);
            
        });
});
</script>
</head>

<body>
<table border="1" class="tabellaElenco cellspacing cellspadding" cellspacing="0" cellpadding="2">

<!--inizio header tabella-->
<tr>
<td class="intestazioneTab">Nome utente</td>
<td class="intestazioneTab">Cognome</td>
<td class="intestazioneTab">Nome</td>
<td class="intestazioneTab">Azioni</td>
</tr>
<!--fine header tabella-->
        
        <tr class="selezionaRiga">
        <td><input style="background-color: #F0F0F0;" class="InputTextPiccolo" type="text" value="prova" name="utente" disabled="true"></td>
        <td><input type="text" value="Utente" name="cognome"></td>
        <td><input type="text" value="prova2" name="nome"></td>
        
        <td>        
        <img id="bDettaglioUtente110" class="img_dettaglioUtente" src="b_edit.gif" name="bDettaglioUtente" style="cursor: hand;">
        </td>
        
        </tr>    
        
        <tr class="selezionaRiga">
        <td><input style="background-color: #F0F0F0;" class="InputTextPiccolo" type="text" value="prova1" name="utente" disabled="true"></td>
        <td><input type="text" value="Utente" name="cognome"></td>
        <td><input type="text" value="prova3" name="nome"></td>
        
        <td>        
        <img id="bDettaglioUtente111" class="img_dettaglioUtente" src="b_edit.gif" name="bDettaglioUtente" style="cursor: hand;">
        </td>
        
        </tr>
    
</table>

</body>
</html>

figlio.asp
codice:
<%
codUtente = request("codUtente")
tipo = request("tipo")
%>

<html>
<head>

</head>
<body>
<%

response.write "<font size=5>Qualcosa qui"& codUtente &"</font>"
%>
</body>
</html>
In pratica ho pensato che quando clicco sul dettaglio della seconda riga le variabili dettaglioUtente e codUtente sono differenti ed eseguo nuovamente l'evento click per aprirla, pero' qualcosa va storto