script show/hide e problema sincronizzazione

**andrea_kobe** · 25-03-2007, 15:12

Ciao a tutti. Ho un problema con lo script che posto qui di seguito. Per arrivare a questo punto ho letto diverse discussioni qui sul forum però adesso mi sono arenato. Il problema è il seguente: se qualcuno è così gentile da fare un copia incolla dello script si renderà conto che cliccando sulla scritta "mostra tutti" i due div verranno correttamente mostrati però rimarrà la scritta relativa ai singoli div "mostra informazioni" quando le informazioni sono già visibili.
Quindi il risultato sarà l'esatto contrario, al pigiare della scritta mostra informazioni le informazioni verranno nascoste e viceversa. Come posso fare in modo che cliccando su mostra tutti la voce relativa ai singoli div diventi "nascondi informazioni" affinchè sia diciamo sincronizzato. Grazie per la pazienza e spero di essere stato sufficientemente chiaro.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<script type="text/javascript">
if(document.getElementById && document.createElement){
document.write('<style type="text/css">*.toggle{display:none}</style>');
window.onload=function(){
    /*le modifiche allo script vanno solo fatte qui*/
	Attiva("nome1","mostra informazioni","nascondi informazioni");
	Attiva("nome2","mostra informazioni","nascondi informazioni");
    }
}
function Attiva(id,s1,s2){
var el=document.getElementById(id);
el.style.display="none";
var c=document.createElement("div");
var link=document.createElement("a");
link.href="#";
link.appendChild(document.createTextNode(s1));
link.onclick=function(){
    link.firstChild.nodeValue = (link.firstChild.nodeValue==s1) ? s2 : s1;
    el.style.display=(el.style.display=="none") ? "block" : "none";
    return(false);
    }
c.appendChild(link);
el.parentNode.insertBefore(c,el);
}

function hideElements() {
    for (var i = 0; i < arguments.length; i++) {
        var e = document.getElementById(arguments[i]);
        e.style.display = 'none';
    }
}

function showElements() {
    for (var i = 0; i < arguments.length; i++) {
        var e = document.getElementById(arguments[i]);
        e.style.display = 'block';
    }
}
</script>
</head>
<body>
					mostra tutti
					nascondi tutti

						
						<h2>Utente1</h2>
						<div id="nome1" class="toggle">
						<dl>
						<dt>Nome:</dt>
						<dd>Mario</dd>
						<dt>Cognome:</dt>
						<dd>Rossi</dd>
						</dl>
						</div>

						<h2>Utente2</h2>
						<div id="nome2" class="toggle">
						<dl>
						<dt>Nome:</dt>
						<dd>Giovanni</dd>
						<dt>Cognome:</dt>
						<dd>Verdi</dd>
						</dl>
						</div>

</body>
</html>

**andrea_kobe** · 26-03-2007, 13:08

Se nessuno è in grado di aiutarmi con lo script che ho postato potete almeno segnalarmi un link in cui ci sia il mostra/nascondi dei singoli div e quello mostra/nascondi di tutti i div contemporaneamente? Io ho cercato molto in rete ma invano.
Grazie.

**pietro09** · 26-03-2007, 13:38

guarda se può andare

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Documento senza titolo</title>

    <script type="text/javascript">
if(document.getElementById && document.createElement)
{
    document.write('<style type="text/css">*.toggle{display:none}</style>');
    window.onload=function()
    {
        /*le modifiche allo script vanno solo fatte qui*/
	    Attiva("nome1","mostra informazioni","nascondi informazioni");
	    Attiva("nome2","mostra informazioni","nascondi informazioni");
    }
}


function Attiva(id,s1,s2)
{
    var el=document.getElementById(id);
    el.style.display="none";
    var c=document.createElement("div");
    var link=document.createElement("a");
    link.id = "a_" + id;
    link.href="#";
    link.appendChild(document.createTextNode(s1));
    link.onclick = function()
    {
        link.firstChild.nodeValue = (link.firstChild.nodeValue==s1) ? s2 : s1;
        el.style.display=(el.style.display=="none") ? "block" : "none";
        return(false);
    };
    c.appendChild(link);
    el.parentNode.insertBefore(c,el);
};

function hideElements() 
{
    for (var i = 0; i < arguments.length; i++) 
    {
        var e = document.getElementById(arguments[i]);
        e.style.display = 'none';
        document.getElementById("a_" + arguments[i]).innerHTML = "mostra informazioni";
    }
}

function showElements() 
{
    for (var i = 0; i < arguments.length; i++) 
    {
        var e = document.getElementById(arguments[i]);
        e.style.display = 'block';
        document.getElementById("a_" + arguments[i]).innerHTML = "nascondi informazioni";
    }
}
    </script>

</head>
<body>
    mostra tutti nascondi tutti
    <h2>
        Utente1</h2>
    <div id="nome1" class="toggle">
        <dl>
            <dt>Nome:</dt>
            <dd>
                Mario</dd>
            <dt>Cognome:</dt>
            <dd>
                Rossi</dd>
        </dl>
    </div>
    <h2>
        Utente2</h2>
    <div id="nome2" class="toggle">
        <dl>
            <dt>Nome:</dt>
            <dd>
                Giovanni</dd>
            <dt>Cognome:</dt>
            <dd>
                Verdi</dd>
        </dl>
    </div>
</body>
</html>

**andrea_kobe** · 26-03-2007, 14:55

L'ho provato ed è semplicemente perfetto.

Ti ringrazio davvero tanto Pietro, mi hai risolto un grandissimo problema.
Grazie ancora e complimenti.

Discussione: script show/hide e problema sincronizzazione

Strumenti discussione

Ricerca discussione

Visualizza

script show/hide e problema sincronizzazione

Permessi di invio