domenica 20 novembre 2011

Javascript show/hide div

Spesso è utile visualizzare del testo statico on demand su pagina Web, il classico esempio è quello della visualizzazione di informazioni cliccando su un pulsante e poi farlo scomparire di nuovo ricliccando.
Il metodo Javascript è il seguente:

function showhide(id) {
    var state = document.getElementById(id).style.display;
        if (state == 'block') {
            document.getElementById(id).style.display = 'none';
            document.getElementById('spiega').value="Mostra Guida";
        } else {
            document.getElementById(id).style.display = 'block';
           
            document.getElementById('spiega').value="Nascondi Guida";
           
        }
    }

 Al caricamento vogliamo che non si veda il testo del div, quindi definiamo

<style type="text/css">
<!--

#spiegazioni {
   
    display: none;
}
-->
</style>

Sulla pagina HTML abbiamo

<form name="caricaBilancio" id="caricaBilancio" ENCTYPE="multipart/form-data" action="CaricaBilancio" method="post">

<input class="inputButton" id="spiega"    type="button" name="Guida"  title="Guida"  value="Mostra guida" onclick="javascript:showhide('spiegazioni')"/>

<div id="spiegazioni">
/// qui il nostro testo
Prova prova
</div>
Vediamo l'esempio cliccando sul pulsante


// qui il nostro testo Prova prova

Nessun commento:

Posta un commento