Le liste di definizione sono un elemento HTML poco noto. Al loro utilizzo e al modo migliore per formattarle con i CSS abbiamo dedicato una serie di articoli di approfondimento:
Qualche tempo fa, Thierry Koblentz ha presentato sul suo sito una libreria Javascript che consente la creazione di una FAQ dinamica basata proprio sull'uso di questo elemento. Quella che segue è una mini-guida per implementare questa soluzione in modo semplice e rapido.
Partiamo dall'esempio. Prima della lista con le FAQ, troviamo due link testuali: 'Mostra tutte le risposte' e 'Nascondi tutte le risposte'. Il loro scopo è chiaro: servono a scompattare e richiudere in un colpo solo tutte le risposte. Per visualizzare una singola risposta, invece, sarà sufficiente cliccare sulla relativa domanda.
Per realizzare il tutto si procede così.
Gli ingredienti
Abbiamo bisogno di tre cose:
- un documento HTML;
- il file .js TJK_ToggleDL.js;
- il foglio di stile TJK_ToggleDL.css.
Trovate tutto nello zip allegato.
La parte HTML
Nella pagina HTML definiamo innanzitutto, secondo l'ordine visto nell'esempio, i due link testuali che agiscono su tutte le risposte. Si tratta di due semplici elementi a a cui vanno assegnati due id ben precisi. Ecco il codice:
<p><a id="TJK_ToggleON">Mostra tutte le risposte</a>
<a id="TJK_ToggleOFF">Nascondi tutte le risposte</a></p>
Segue la lista di definizione. Ricordiamo che una lista di questo tipo si basa su tre elementi:
<dl>: definisce la lista;<dt>: un item di cui verrà data la definizione (nel nostro caso rappresenta la domanda);<dd>: la definizione di uno specifico item (nel nostro caso la risposta).
In pratica, ogni domanda corrisponde a un <dt> e la risposta relativa ad un <dd>. Ecco il codice:
<dl id="TJK_DL">
<dt>Cosa sono i CSS?</dt>
<dd>I CSS (Cascading Style Sheets, fogli di stile a cascata)....</dd>
<dt>Quali sono i vantaggi dei CSS?</dt>
<dd>I CSS hanno molti vantaggi, tra questi: separare totalmente contenuto....</dd>
<dt>A che versione dei CSS siamo arrivati?</dt>
<dd>Più che versione, per i CSS si parla di livello....</dd>
<dt>Cosa devo sapere prima di imparare i CSS?</dt>
<dd>È indispensabile avere una discreta padronanza....</dd>
</dl>
Tutto molto semplice. La cosa fondamentale è assegnare all'elemento <dl> l'id TJK_DL.
Il Javascript
A questo punto dobbiamo aggiungere la parte di interazione. Il file TJK_ToggleDL.js va collegato alla pagina con questa istruzione (da mettere all'interno della sezione <head>:
<script type="text/javascript" src="TJK_ToggleDL.js"></script>
Nell'esempio, come si vede, si assume che la pagina HTML e lo script siano all'interno della stessa cartella.
A proposito dello script, c'è da evidenziare una cosa. All'inizio trovate un'istruzione che provvede a inserire dinamicamente il link al foglio di stile TJK_ToggleDL.css:
document.write("<link href="TJK_ToggleDL.css" type="text/css" rel="stylesheet" />")
Anche in questo caso, si presume che il CSS sia nella stessa cartella della pagina HTML e dello script. Nel caso si decida di mettere il CSS in un'altra directory, bisognerà aggiustare di conseguenza il path presente nello script.
Il resto del codice dovrebbe essere lasciato intatto.
Il CSS
Il file TJK_ToggleDL.css contiene una serie di regole necessarie alla formattazione della lista di definizione. È conveniente tenerlo separato da eventuali altri CSS. Il codice è commentato in italiano e contiene i riferimenti alle principali sezioni. Potrà ovviamente essere personalizzato a piacere in base al layout del proprio sito.
Conclusioni
Lo script di Koblentz presenta una serie di fattori positivi che l'autore evidenzia nella pagina di presentazione. Questi i principali:
- usa un markup semantico;
- non impedisce la fruizione delle FAQ a chi ha Javascript disabilitato nel browser;
- tiene perfettamente separati i livelli di struttura, presentazione e interazione.
