Presentiamo questa settimana uno script semplice nell'implementazione ma estremamente potente e versatile. Può essere utilizzato proficuamente in numerosissimi casi (la visione dell'esempio allegato renderà tutto molto più chiaro e suggerirà tutti gli ambiti possibili di applicazione). Un utilizzo classico potrebbe essere nell'ambito di una colonna laterale di un layout, per mostrare e nascondere con un click lunghe liste di link o menu che altrimenti occuperebbero uno spazio poco gestibile. Tutto è basato sull'integrazione/interazione di Javascript e CSS.
Lo script si compone di una sezione Javascript, e di un richiamo all'interno delle pagine Web.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
La sezione Javascript è contenuta all'interno della sezione <head></head>, ma nulla impedisce di inserirla in un file .js esterno da richiamare con il tag <script src="..."></script>. Vediamo il codice:
<script type="text/javascript">
function ShowAndHide(id1,id2){
if(document.getElementById){
el1=document.getElementById(id1);
el2=document.getElementById(id2);
if(el1.style.display=="none"){
el1.style.display="block";
el2.style.display="none";
}
else{
el1.style.display="none";
el2.style.display="block";
}
}
}
Si tratta di una sola funzione denominata 'ShowAndHidè. Prende due parametri (id1, id2) che saranno passati con due semplici istruzioni contenute all'interno della parte HTML.
Se si osserva il funzionamento dell'esempio allegato è più facile comprendere quali sono i due parametri. La particolarità dello script è che quando si clicca sul link 'Mostra i commenti' viene mostrata una parte prima nascosta. Nel contempo la scritta 'Mostra i commenti' viene sostituita da quella più logica e azzeccata 'Nascondi i commenti', cliccando sulla quale si torna alla situazione di partenza.
I due parametri da passare alla funzione sono gli id dei due elementi da nascondere e mostrare. Essi sono identificati nella funzione con le classiche istruzioni getElementById. La funzione stessa, che va lasciata intatta (in questo sta la sua forza), provvederà ad alternare la visualizzazione sfruttando le proprietò di stile 'display' e 'nonè. Come vedremo, è fondamentale anche il CSS.
## 2: LA SEZIONE CSS
Come accennavamo è una parte importante. Una regola in particolare. Il div da mostrare (nel nostro esempio si chiama 'commenti') deve essere all'inizio nascosto. Dobbiamo farlo assegnando a quest'ultimo la proprietà display: none;. Così:
div#commenti{display:none}
## 3: LA SEZIONE HTML
Nel corpo della pagina abbiamo questo codice. Per prima cosa un div con id="mostra":
<div id="mostra">
<p><a href="#" onclick="ShowAndHide('mostrà,'commenti');return(false)">Mostra
commenti</a> </p>
</div>
Al suo interno un link che richiama la nostra funzione con l'evento onclick. Si notino i due parametri passati: ('mostrà, 'commenti'): sono i due div da nascondere e mostrare. Fondamentale poi usare il return(false).
Subito dopo, inseriamo il secondo div. Al suo interno possiamo metterci qualunque cosa, ma all'inizio dovremo piazzare un link per nascondere nuovamente il div:
<div id="commenti">
<a href="#" onclick="ShowAndHide('mostrà,'commenti');return(false)">Nascondi commenti</a>
<p>Con javascript è molto semplice mostrare e nascondere un elemento di pagina.</p>
</div>
Come si vede, questo link richiama la stessa funzione passando gli stessi parametri visti sopra.
