apertura/chiusura <div> nascosti

**greatciccio** · 26-03-2011, 13:44

Ciao ragazzi come il titolo fa capire ho dei problemi con div nascosti...
Allora... Ho una page con 10 div nascosti che si aprono al click del link... Fin qui tutto bene ma il problema viene alla loro chiusura ovvero:

Ipotetizziamo che clicco sul link n1 attualmente per chiuderlo devo ricliccare sul link
Invece vorrei che al click del link n2 n1 si chiudesse automaticamente... Vi posto il codice:

Funzione:

<script type="text/javascript">
function toogle (id) {
If (document.getElementById) {
if(document.getElementById(id).style.display =='none'){
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
}
}
</script>

Il richiamo:

testo
<div id="n1" style="width:400px; border-style: dotted; border-color: #000; display:none;">testo </div>

Ora se io aprissi il link n2 n1 lo posso chiudere modificando nel richiamo di n2

document.getElementById('').style.display='none';
In
document.getElementById('n1').style.display='none' ;

Ma così facendo chiudo solo n1 se è aperto n3 oppure n4 n5 etc etc questi non si chiudo ma si aggiungono e obbligandomi a ricliccarli per chiuderli....

Come posso incrementare lu function in modo da farmi chiudere qualunque div all'apertura di un'altro? Vi ringrazio anticipatamente

**cavicchiandrea** · 26-03-2011, 14:54

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function toogle(element){
var div = document.getElementsByTagName('div');
var i;
for(i=0; i<div.length; i++){
	if(div[i].className=='toogleOFF' && i==element){
		div[i].className='toogleON';}
		else{div[i].className='toogleOFF';
		}
	}
}
</script>
<style type="text/css">
.toogleOFF{
	display:none;
	border:#999 1px solid;
	width:600px;
	height:100px;
}
.toogleON{
	display:block;
	border:#999 1px solid;
	width:600px;
	height:100px;
}
.open{display:block;}
</style>
</head>

<body>
apri
<div class="toogleOFF">div 0</div>
apri
<div class="toogleOFF">div 1</div>
apri
<div class="toogleOFF">div 2</div>
apri
<div class="toogleOFF">div 3</div>
apri
<div class="toogleOFF">div 4</div>
apri
<div class="toogleOFF">div 5</div>
apri
<div class="toogleOFF">div 6</div>
</body>
</html>

**greatciccio** · 26-03-2011, 17:25

Grazie mille per la risosta la tua funzione va alla grande ma ci sta un problemino....

Come provo ad implementarla nel mio codice non funziona

Al click mi va via l'intera pagina eppure non faccio altro che copia incolla....

Avete qualche risposta?

**cavicchiandrea** · 26-03-2011, 17:42

Con conoscendo la tua pagina non saprei, ma immaginavo che le nozioni di base ci fossero

**greatciccio** · 26-03-2011, 18:15

Sorry ma Con copia incolla intendevo che utilizzo la stessa metodica senza modifiche alla function le uniche modifiche si trovano nello style do vado a personalizzarlo e lo sposto nello stylesheet e no nel head come il tuo codice....

**cavicchiandrea** · 26-03-2011, 18:26

Non importa basta che non cambi i nomi delle classi, oppure se le cambi di modificare con lo stesso nome anche nella funzione e di averne due una con display:none che nasconde il div uno che mostra display:block

**greatciccio** · 27-03-2011, 21:19

Buonasera.... Ancora alle prese con questa funzione... Dopo aver sbattuto la testa x un'ora sono riuscito a capire il perchè la tua funzionasse e la mia no... Il problema sono proprio il <div> ovvero la mia pagina ha ovviamente altri div e questa funzione è come se non sapesse quali div aprire... Infatti nel tuo esempio esistono solo div 0 div 1 etc etc... Sono riuscito a capire il problema cosa da voi sicuramente già nota ma ora mi chiedo.... Come posso risolvere? Posso gesti la funzione tramite id? E no tramite div? Vi prego help me...

**cavicchiandrea** · 27-03-2011, 21:28

Posta la tua pagina altrimenti non ne veniamo fuori e indica quali div si devono aprire.
Saluti.

**greatciccio** · 27-03-2011, 22:43

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Apri/Chiudi <div> Nascosti</title>

<script>
function toogle(element){
var div = document.getElementsByTagName('div');
var i;
for(i=0; i<div.length; i++){
if(div[i].className=='toogleOFF' && i==element){
div[i].className='toogleON';}
else{
div[i].className='toogleOFF';
}
}
}
</script>

<style type="text/css">
.toogleOFF{
display:none;
border:#7b1c20 1px dotted;
border-top:none;
width:400px;

}
.toogleON{
display:block;
border:#7b1c20 1px dotted;
border-top:none;
width:400px;

}
.open{display:block;}
</style>

</head>

<body>
<div id="container">
<div id="header">
<div id="logo"></div>
</div>

<div id="body">
<div id="content">
<div id="expol">
<div id="main" >
<h2>Elenco Titoli</h2>
<ul>
<h4>Titolo 1</h4>
<div class="toogleOFF">
<ul>
[*]<span>div 0</span>
[/list]
</div>

<h4>Titolo 2</h4>
<div class="toogleOFF">
<ul>
[*]<span>div 1</span>
[*]<span>div 1</span>
[*]<span>div 1</span>
[/list]
</div>
[/list]
</div>
</div>
</div>
</div>
<div id="footer">
<p class="left">© 2011</p>
</div>
</div>
</body>
</html>

**greatciccio** · 27-03-2011, 23:01

Qusta è la sintesi della mia pagina ma basta prendere il tuo codice e vedrai che racchiudendo il body in un div non funziona più.....

Discussione: apertura/chiusura <div> nascosti

Strumenti discussione

Ricerca discussione

Visualizza

<div> nascosti

Permessi di invio