Toggle

B

Bubbi

Nuovo Utente
21 Set 2006
19
0
0
Ciao a tutti.
Ho una serie di elementi nascosti da rendere visibili/invisibili cliccando su un link. Gli elementi sono identificati in questo modo:
id="nascosto1"
id="nascosto2"
id="nascosto3"
ecc..

Sto cercando di creare una funzione Toggle che con un ciclo for aggiunga la numerazione agli id "nascosto" per far si che la funzione agisca su ogni elemento.
Ho provato in questo modo:

Codice: 
<script type="text/javascript">
function toggle(id){ 
	var num = document.getElementsById('nascosto');
	for (i = 0; i < num.length; i++) {
		if (num[i].style.display=='none'){
			num[i].style.display='block';
		} else {
			num[i].style.display='none';
		}
	}
}
	</script>

<tr><td><a href="#" style="cursor:pointer;" onclick="toggle('nascosto1');">Risposte ($totale[num])</a></td></tr>
	<tr><td><table width="100%" border="0" id="nascosto1" style="padding:5px;display:none;">
	<tr><td>
	testo nascosto1
	</td></tr>
	</table></td></tr>
<tr><td><font><a href="#" style="cursor:pointer;" onclick="toggle('nascosto2');">Risposte ($totale[num])</a></font></td></tr>
	<tr><td><table width="100%" border="0" id="nascosto2" style="padding:5px;display:none;">
	<tr><td>testo nascosto2</td></tr>
	</table>
	</TD></TR>

..ma non mi funziona.
Sapete dirmi dove sbaglio??
 
alessandro1997

alessandro1997

Utente Attivo
6 Ott 2009
5.302
1
0
26
Roma
alessandro1997.netsons.org
Non funziona perché la funzione getElementsById non esiste. Esiste solamente getElementById e recupera solamente il primo elemento. Questo per un motivo semplice: l'ID è un identificativo univoco che solo un elemento all'interno della pagina può avere. Per fare quello che cerchi ti conviene cambiare l'attributo id con name e successivamente usare getElementsByName.
 
alessandro1997

alessandro1997

Utente Attivo
6 Ott 2009
5.302
1
0
26
Roma
alessandro1997.netsons.org
A parte che la tua funzione chiede un parametro ID che poi non sfrutta. Ripensandoci, lascia tutto così com'è e riscrivi la funzione così:
Codice: 
function toggle(id)
{ 
	var elem = document.getElementById(id);
	
	if(elem.style.display == 'none')
		elem.style.display = 'block';
	else
		elem.style.display = 'none';
}
In questo modo la potrai usare così:
HTML: 
<!DOCTYPE html>
<html>
	<head>
		<title>Prova funzione toggle</title>
		<script type="text/javascript">
		function toggle(id)
		{ 
			var elem = document.getElementById(id);
			
			if(elem.style.display == 'none')
				elem.style.display = 'block';
			else
				elem.style.display = 'none';
		}
		</script>
	</head>
	<body>
		<div>
			<p>
				<a href="#" onclick="javascript:toggle('elem1');">Nascondi/visualizza</a>
			</p>
		</div>
		<div id="elem1">
			<p>Questo testo verr&agrave; nascosto o visualizzato.</p>
		</div>
	</body>
</html>
 
Ultima modifica:
B

Bubbi

Nuovo Utente
21 Set 2006
19
0
0
Grande!!!!!!! funziona perfettamente!!!
:beer:

Io avevo provato a modificare lo script così:
Codice: 
<script type="text/javascript">
function toggle(){
var tables = document.getElementsByTagName('table');
   for (var i=0; i<tables.length; i++){
        if (tables[i].id="risp_nascosto"){
           if(tables[i].style.display=='none'){
                tables[i].style.display='block';
           } else {
                tables[i].style.display='none';
           }
        }
    }
}
</script>
.. ma non c'è stato verso..
sono proprio negata per il JS :(
Grazie mille per l'aiuto
:byebye:
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
webmachine [JQUERY] Cambiare immagine al click, toggle jQuery 1
J Funzione toggle("slow ") jQuery 2
F toggle con testo al toggle tra due div jQuery 3
Nik [RISOLTO] Funzione Toggle nel menù: attiva e disattiva jQuery 2
S Problema con toggle jquery jQuery 1

Discussioni simili

Alto Basso