Div a Comparsa/Scomparsa

**iAlessandro93** · 21-05-2012, 20:59

Buonasera,

ho preso questo codice da qui:
http://javascript.html.it/articoli/l...on-un-click/2/

Vorrei sapere se è possibile che all'aprirsi di un DIV si chiuda quello aperto precedentemente.

Grazie in anticipo =)

**iAlessandro93** · 21-05-2012, 21:49

Ecco il codice:

<script type="text/javascript" language="javascript">
function visualizza(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>

<div id="testo"><a href="#" onclick="visualizza('immagine'); return false">
Clicca qui per visualizzare l'immagine scoop</a></div>

<div id="immagine" style="display:none">[img]immagine.jpg[/img]</div>

**iAlessandro93** · 22-05-2012, 10:55

Vi servono maggiori info??

**Vindav** · 22-05-2012, 11:28

quanti div sono presenti nella pagina?

**iAlessandro93** · 22-05-2012, 11:41

Per ora solo due DIV a comparsa. Ma in seguito arriveró fino a 9. Peró mi basta un codice anche per due soli div, poi cerco di adattarmi!

**Vindav** · 22-05-2012, 12:39

codice:

function visualizza(id){
    listDiv = document.getElementsByClassName("immagineClass");
    for(i=0;i<listDiv.length;i++){
        if(listDiv[i].style.display == 'block' && listDiv[i].id != id){
            listDiv[i].style.display = 'none';
        }
    }
    
    if(document.getElementById(id).style.display == 'none'){
        document.getElementById(id).style.display = 'block';
    }else{
        document.getElementById(id).style.display = 'none';
    }
}

Tutti i div da mostrare e nascondere devono avere l'attributo class valorizzato con immagineClass(o uno a tua scelta).

p.s. il metodo getElementsByClassName non è crossbrowser(se non ricordo male non è supportato da <IE8)

**iAlessandro93** · 22-05-2012, 16:02

Prima di tutto grazie della risposta.

Non riesco a farlo funzionare:

codice:

<script type="text/javascript" language="javascript">
function visualizza(id){
    listDiv = document.getElementsByClassName("immagineClass");
    for(i=0;i<listDiv.length;i++){
        if(listDiv[i].style.display == 'block' && listDiv[i].id != id){
            listDiv[i].style.display = 'none';
        }
    }
    
    if(document.getElementById(id).style.display == 'none'){
        document.getElementById(id).style.display = 'block';
    }else{
        document.getElementById(id).style.display = 'none';
    }
}
</script>



<div id="testo"><a href="#" onclick="visualizza('immagine'); return false">
Clicca qui per visualizzare l'immagine scoop</a></div>


<div id="immagine" style="display:none">[img]img.jpg[/img]</div>

**carlomarx** · 22-05-2012, 18:15

Se vuoi un consiglio: usa solo i css, senza javascript.

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Esempio</title>
<style type="text/css">
.espandibile {
	display: none;
}

.espandibile:target {
	display: block;
}	
</style>

</head>
<body>
<ul>
	[*]Apri div1
	[*]Apri div2
	[*]Apri div3
	[*]Apri div4[/list]
<div class="espandibile" id="esempio1">
	

Questo &egrave; il primo div</p>
</div>
<div class="espandibile" id="esempio2">
	

Questo &egrave; il secondo div</p>
</div>
<div class="espandibile" id="esempio3">
	

Questo &egrave; il terzo div</p>
</div>
<div class="espandibile" id="esempio4">
	

Questo &egrave; il quarto div</p>
</div>
</body>
</html>

**iAlessandro93** · 22-05-2012, 19:32

Originariamente inviato da carlomarx
Se vuoi un consiglio: usa solo i css, senza javascript.

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Esempio</title>
<style type="text/css">
.espandibile {
	display: none;
}

.espandibile:target {
	display: block;
}	
</style>

</head>
<body>
<ul>
	[*]Apri div1
	[*]Apri div2
	[*]Apri div3
	[*]Apri div4[/list]
<div class="espandibile" id="esempio1">
	

Questo &egrave; il primo div</p>
</div>
<div class="espandibile" id="esempio2">
	

Questo &egrave; il secondo div</p>
</div>
<div class="espandibile" id="esempio3">
	

Questo &egrave; il terzo div</p>
</div>
<div class="espandibile" id="esempio4">
	

Questo &egrave; il quarto div</p>
</div>
</body>
</html>

Grazie! E' molto più semplice, facile da usare e modificabile rapidamente.

Ho risolto.

Discussione: Div a Comparsa/Scomparsa

Strumenti discussione

Ricerca discussione

Visualizza

Div a Comparsa/Scomparsa

Permessi di invio