PDA

View Full Version : [JS] mostra/nascondi testo con click

StErMiNeiToR
25-06-2006, 23:26
ecco un esempio di quello che volevo dire io

http://www.esreality.com/?a=post&id=1117502
andbin
26-06-2006, 08:59
ecco un esempio di quello che volevo dire io

http://www.esreality.com/?a=post&id=1117502La logica di gestione del mostra/nascondi di un blocco è (abbastanza facilmente) deducibile guardando il sorgente della pagina da te indicata.

Comunque se vuoi un esempio più semplice e "pulito", eccolo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mostra/Nascondi blocco</title>
<script type="text/javascript">
<!--
function mostra_nascondi (id_blocco)
{
nuovo_stato = (document.getElementById (id_blocco).style.display == 'block') ? 'none' : 'block';
document.getElementById (id_blocco).style.display = nuovo_stato;
}
//-->
</script>
<style type="text/css">
<!--
#blocco1 { display: none; }
#blocco2 { display: none; }
-->
</style>
</head>
<body>

<p><a href="#" onclick="mostra_nascondi('blocco1'); return false">Mostra/Nascondi Blocco 1</a></p>
<div id="blocco1">
Blocco 1<br>Blocco 1<br>Blocco 1<br>Blocco 1
</div>

<p><a href="#" onclick="mostra_nascondi('blocco2'); return false">Mostra/Nascondi Blocco 2</a></p>
<div id="blocco2">
Blocco 2<br>Blocco 2<br>Blocco 2<br>Blocco 2
</div>

</body>
</html>Alcune note:
- Ovviamente è necessario che Javascript sia attivo, se fosse disabilitato, non sarebbe possibile visualizzare i blocchi.
- Per via del solo utilizzo di getElementById, il codice non è compatibile con IE4. Per renderlo compatibile è necessario fare un test in più e usare document.all.