Small Tutorial: testo a scomparsa tramite JavaScript (JS)

Quanti di voi hanno visto quei fantastici siti/blog dove ci sono i blocchi di testo che appaiono/scompaiono magicamente quando si clicca su dei link...
Sono fantastici vero? ^^

Bè oggi voglio spiegare un pochino come si fanno...
e vedrete che non è poi così complicato :)

Intanto quello di cui avete bisogno è di una funzione javaScript.
Senza entrare nel dettaglio del linguaggio quello che dovete aggiungere è quanto segue:

<script type='text/javascript'>
function openclose(name){
var elm = document.getElementById(name);
if(elm .style.display == &#39;none&#39;)
elm.style.display = &#39;block&#39;;
else
elm.style.display = &#39;none&#39;;
}
</script>


Questa funzione recupera dalla vostra pagina l'elemento con ID passato, e controlla se il suo stile display vale block o none.
In caso sia block lo imposta a none, e viceversa.

Ora, quando volete avere del testo/contenuti che compaiono/scompaiono fate un qualcosa di questo tipo:

<h2 style="cursor: pointer;" onclick="openclose('myElm');">Show∇</h2>
<div id="myElm" style="display: none;">
<h2 style="cursor: pointer;" onclick="openclose('myElm');">HideΔ</h2>
</div>


All'interno del div mettete quello che vi serve e avrete un effetto simile ^^

Show∇




byez^^

0 commenti:

Donazioni

My Menu'