Semplice, potente e facile da configurare questo script. Utilissimo in situazioni come lunghe liste di FAQ in cui si voglia tenere nascoste inizialmente le risposte per mostrarle in seguito ad un semplice click dell'utente.
Lo script si compone di un file .js esterno da collegare alla pagina con il tag <script> e di un richiamo all'interno della parte HTML.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
Il file expandCollapse.js contiene la semplice funzione che gestisce il funzionamento dello script:
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}
La funzione riceve come unico parametro l'identificativo (id) dell'elemento da mostrare/nascondere. Per il resto, non fa altro che andare a valutare lo stato della proprietà 'display' di quest'ultimo elemento, impostandola su 'block' o 'nonè in seguito all'input dell'utente. Il codice può essere lasciato intatto.
## 1: LA SEZIONE HTML
Nel corpo della pagina dovremo costruire innanzitutto il link che attiverà la funzione. Nel contesto di una lista di FAQ, sarà la domanda, come nell'esempio. Il link, costruito con il normale elemento <a>, avrà questa forma:
<a href="#" onclick="return toggleMe('para1')">A cosa serve questo script?</a>
Tutto viene attivato con l'evento onclick. Si osservi, insieme al richiamo della funzione 'toggleMè, il passaggio del parametro ('para1').
Di cosa si tratta? Dell'id del paragrafo contenente la risposta e che nel codice HTML sarà piazzato immediatamente dopo:
<p id="para1" style="display:none">
A mostrare e nascondere dinamicamente una sezione della pagina inizialmente invisibile.
</p>
Fondamentale è impostare in partenza il valore della proprietà 'display' sul valore 'nonè. Qui è fatto con uno stile in linea, ma l'optimum è fare tutto in un CSS esterno.
