Lista a scomparsa.
Ipotizzando che nella nostra pagina ASPX abbiamo una lista di questo tipo:
<dl id="list">
<dt>Panino con la milza</dt>
<dd>
Tipica specialità palermitana, il panino con la milza nasce nel periodo ...</dd>
<dt>Panino crocché e panelle</dt>
<dd>
Il panino con le crocché di patate e le panelle con farina di ceci è l'unione di due
tipici prodotti del palermitano ...</dd>
<dt>Stigghiola</dt>
<dd>
Le stigghiola è uno dei "piatti" più grassi palermitani.
Le stigghiola sono il budello di capretto, pulito e condito ...</dd>
</dl>
Per ottenere un effetto hide/show di questa lista tramite jQuery, inseriremo il seguente codice (i numeri servono per la spiegazione):
1 -- jQuery(document).ready(function() {
2 -- $("#list dd").hide();
3 -- $("#list dt").click(function()
4 -- {
5 -- $(this).next("dd:visible").slideUp("slow");
6 -- $(this).next("dd:hidden").slideDown("slow");
7 -- });
8 -- });
La riga di codice 1 serve per far partire l'effetto solamente dopo che tutto il DOM è stato caricato.
La 2° riga specifica che tutti gli elementi dd dell'elemento identificato come list devono essere nascosti.
Con la 3° riga specifichiamo un evento di tipo click su tutti gli elementi di tipo dt dell'elemento list. Quando l'evento si verificherà, tutti gli elementi dd sotto l'elemento dt appena cliccato verranno controllati.
Se l'elemento dd è visibile, dd:visible, allora lo nasconderemo con slideUp con velocità slow, viceversa se sarà nascosto, dd:hidden, allora lo mostreremo con slideDown.
Enjoy
posted @ domenica 5 ottobre 2008 21:06