Dall’HTML al jQuery: come mostrare/nascondere dei box in una pagina web?

faq

Prendendo spunto dalla richiesta di un lettore ho pensato di realizzare questo esempio per mostrare il processo di creazione di una sezione di un sito, dalla struttura HTML fino all’integrazione di jQuery. Vediamo quindi in questo articolo come realizzare una pagina di Domande frequenti (FAQ).

La struttura HTML

La prima cosa che devi fare è chiederti come devono essere mostrate le informazioni quindi, nel caso specifico, quali tag utilizzare. Cosa dobbiamo realizzare? Una serie di domande seguite dalle relative risposte.

Quando hai una serie di elementi da mostrare nel 99% dei casi devi utilizzare una lista. Quindi la scelta si riduce a:

  • Lista ordinata
  • Lista non ordinata
  • Liste di definizione

Nel nostro caso specifico, vogliamo rappresentare un elenco qualsiasi di domande, quindi l’ordine relativo non è importante. Potremmo utilizzare le liste di definizione, ma il rapporto semantico che c’è tra domanda e risposta, secondo me, non è esattamente come quello tra termine e definizione. Resta quindi come scelta definitiva una lista non ordinata.

<ul>
  <li>...</li>
  <li>...</li>
  ...
</ul>

Bene, abbiamo così ottenuto l’involucro esterno. In ogni elemento della lista dobbiamo inserire una domanda e una risposta. Che tag utilizzare?

La domanda è quello che da specificità all’elemento, quindi io la vedrei ben rappresentata da un’intestazione. Il livello dipenderà dal caso particolare ma, considerando che il tag h1 viene di solito utilizzato per il nome del sito e il tag h2 per i titoli delle pagine, possiamo con buona approssimazione pensare di utilizzare un’intestazione di terzo livello:

<ul>
  <li>
    <h3>Domanda</h3>
    ....
  </li>
  <li>
    <h3>Domanda</h3>
    ....
  </li>
  ...
</ul>

Le risposte purtroppo possono essere di natura molto varia, quindi comprendere paragrafi, liste, tabelle, immagini e quant’altro. Non possiamo quindi associare a queste un tag specifico.

<ul>
  <li>
    <h3>Domanda</h3>
    <p>....</p>
  </li>
  <li>
    <h3>Domanda</h3>
    <table>...</table>
  </li>
  ...
</ul>

Questo modo di strutturare il codice prende il nome di compound (che tradotto significa “composto”): infatti abbiamo composto in una struttura significativa vari tag.

Ecco il risultato di questa prima fase del nostro lavoro: come puoi vedere, anche senza alcuno stile applicato, le coppie domanda/risposta sono ben visibili.

Applicare gli stili CSS

Devo ammettere, però, che anche per uno sviluppatore una pagina FAQ così è un po’ spoglia. Applichiamo un foglio di stile alla pagina, in modo da renderla più presentabile.

La prima cosa che faccio di solito è quella di azzerare tutti gli stili interni del browser. Esistono “fogli di reset” già pronti, come quello realizzato da Eric Meyer oppure da Yahoo, anche particolarmente complessi; per questa occasione basterà azzerare margini e padding di ogni elemento.

 * {
   margin:0;
   padding:0;
}
...

Il prossimo passo sarà quello di centrare la struttura, dando una dimensione fissa al body e margini laterali calcolati automaticamente. Specifichiamo poi un colore di sfondo e lo stile globale del testo (non dimenticare mai di specificare l’interlinea!):

...
body{
background-color:#036;
color:#fff;
font: small/1.4 Helvetica,Arial,sans-serif;
margin:0 auto;
width:960px;
}
...

Questo è il risultato a cui siamo arrivati. Nota come ho inserito le regole in ordine alfabetico: questo mi permette di fare uno scanning più veloce del testo, in fase di ricerca.

Il risultato non è però dei migliori: l’azzeramento dei margini ha avvicinato tutti gli elementi, rendendoli difficoltosi da leggere. Proseguiamo nella nostra opera, modificando l’aspetto della lista delle domande. Per assicurarci di applicare gli stili solo a questa lista, applichiamo un ID all’elemento ul:

<ul id="faq">
  <li>
    <h3>Domanda</h3>
    <p>....</p>
  </li>
  <li>
    <h3>Domanda</h3>
    <table>...</table>
  </li>
  ...
</ul>

Applichiamo uno sfondo agli elementi li, eliminiamo i punti d’elenco applicati di default dal browser, e diamo un po’ di margini:

...
#faq > li{
background-color:#69C;
list-style-type:none;
margin-bottom:10px;
padding:5px;
}
...

Quello che resta da fare è modificare l’aspetto delle domande, in modo da farle risaltare rispetto alle risposte: gli utenti scorreranno la pagina passando rapidamente da una domanda all’altra, soffermandosi così solo su quella di loro interesse:

...
#faq h3{
background-color:#369;
color:#FFF;
padding:5px;
padding-left:20px;
}
...

Il risultato non è per niente male: certo si potrebbe realizzare qualcosa di più elaborato, ma rende perfettamente l’idea.

Come rendere il tutto più interessante con jQuery?

Le nostre FAQ sono certamente ben strutturate, hanno un aspetto accettabile, ma sono un po’ “statiche”, non trovi? Possiamo renderle più interessanti utilizzando jQuery: nasconderemo le risposte che verranno mostrate solo al clic sulla domanda relativa.

La prima cosa da fare è includere jQuery e creare un nuovo file. Il passo successivo è quello di nascondere tutti gli elementi di ogni voce della lista, tranne le domande. Per far ciò utilizzeremo un selettore speciale incluso in jQuery: :not. Questo selettore seleziona tutti gli elementi tranne quelli passati come argomento. Ad esempio:

$(":not(p)").hide();

permette di nascondere tutti gli elementi tranne i paragrafi. Applichiamo questo selettore alle nostre FAQ:

$(document).ready(function(){
$("#faq li > *:not(h3)").hide();
});

L’effetto è più che soddisfacente. Adesso non rimane che applicare l’azione mostra/nascondi al titolo. Per far questo utilizziamo la funzione click, utilizzando le variabili per rendere il codice più leggibile:

$(document).ready(function(){
$("#faq li > *:not(h3)").hide();
$("#faq h3").click(function (){
//selezioniamo tutte le risposte
var risposta = $(this).siblings();
//mostriamo/nascondiamo le risposte
risposta.slideToggle("slow");
});
});

Il codice è molto semplice: prima associamo l’evento click alle domande (#faq h3) poi selezioniamo la risposta, utilizzando la funzione siblings di jQuery, che seleziona tutti gli elementi dello stesso livello di quello considerato; infine attraverso la funzione slideToggle mostriamo/nascondiamo la nostra selezione. Il risultato è perfettamente funzionante, ed è esattamente ciò che volevamo ottenere.

Possiamo fare ancora di meglio, però. Ad esempio gli utenti non hanno nessun feedback visivo della cliccabilità dei titoli: a loro appaiono semplici testi! Potremmo applicare un puntatore diverso tramite css, però poi sarebbe visibile anche nel caso di JavaScript non abilitato. La cosa migliore è quindi applicare tale puntatore sempre tramite JavaScript, sfruttando il concatenamento fornito da jQuery:

$(document).ready(function(){
$("#faq li > *:not(h3)").hide();
$("#faq h3").css("cursor","pointer").click(function (){
//selezioniamo tutte le risposte
var risposta = $(this).siblings();
//mostriamo/nascondiamo le risposte
risposta.slideToggle("slow");
});
});

Aggiungiamo poi un altro elemento visivo, un piccolo “più”, che suggerisce la possibilità di espansione dei vari elementi. Lo applicheremo come sfondo delle domande, tramite CSS:

...
#faq h3{
background:#369 url('../img/plus.gif') center left no-repeat;
color:#FFF;
padding:5px;
padding-left:20px;
}
...

Questo è ciò che abbiamo ottenuto. L’usabilità è sicuramente aumentata: ora è chiaro che ogni domanda nasconde la relativa risposta, e che è possibile cliccare per ottenerla. C’è solo un ultimo dettaglio fuori posto: il simbolo accanto alla domanda è sempre un “più” anche quando la risposta è mostrata: in questi casi vorremmo che si trasformasse in un “meno”.

Dobbiamo modificare il nostro script, in modo tale che lo sfondo della domanda cambi a seconda dello stato della risposta:

$(document).ready(function(){
$("#faq li > *:not(h3)").hide();
$("#faq h3").css("cursor","pointer").click(function (){
var domanda = $(this);

//Immagine di sfondo: meno
var minus = {
'background-image':'url(img/minus.gif)'
};

//Immagine di sfondo: più
var plus = {
'background-image':'url(img/plus.gif)'
};

//selezioniamo tutte le risposte
var risposta = domanda.siblings();

//se la risposta è nascosta mettiamo come sfondo
//il più, altrimenti il meno
if (risposta.is(':hidden')){
domanda.css(minus);
}
else{
domanda.css(plus);
}

//mostriamo/nascondiamo le risposte
risposta.slideToggle("slow");
});
});

La cosa importante di questa modifica è l’aggiunta del blocco “if-else”, che sfrutta il selettore speciale :hidden: quest’ultimo seleziona tutti gli elementi nascosti, e viene passato come argomento alla funzione .is(). Quindi se l’elemento è nascosto, associamo l’immagine di sfondo “più”, tramite la funzione .css(), altrimenti assegniamo il “meno”.

L’ultima accortenza è quella di rendere l’animazione più fluida: come puoi notare tutti gli elementi della risposta vengono animati, provocando un effetto “stretched”. Questo è dovuto al fatto che jQuery effettua l’animazione scelta su ogni elemento e non sul blocco. La soluzione è molto semplice: tramite JavaScript racchiudere la risposta in un div aggiuntivo, in modo da rendere l’animazione più scorrevole.

La funzione che utilizziamo per questo scopo è wrapAll che, come suggerisce il nome, “avvolge” tutti gli elementi nel tag passato come argomento. Noi vogliamo un semplice div, quindi passeremo questa stringa come argomento:

$(document).ready(function(){
$("#faq li > h3").each(function(){
$(this).siblings().wrapAll('<div>');
});
...

Ecco finalmente il risultato finale.

Considerazioni finali

Ci sono diversi punti che mi preme sottolineare: abbiamo visto come il processo sia partito da semplice HTML, a cui è stato applicato un foglio di stile, e solo in ultima battuta abbiamo aggiunto gli effetti tramite jQuery. Questa tecnica è nota come progressive enhancement. Questo fa si che la nostra pagina sia accessibile e fruibile sia che l’utente navighi con un browser moderno, piuttosto che con un browser testuale o obsoleto, o ancora utilizzando uno screen reader.

Questo concetto di sovrapposizione di struttura, aspetto e azione è fondamentale in un panorama ampio come il web dei giorni nostri, in cui gli utenti possono accedere alle nostre pagine dai client più disparati.

Puoi scaricare i file del modulo FAQ e modificarli/adattarli alle tue esigenze e, perché no, condividere le tue modifiche con noi.

Download
Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , , ,

L'autore

Appassionato di web design, si diletta a creare dei layout (X)HTML+CSS. È un maniaco del codice pulito e ordinato, il tipo di persona che vi ritrovate in casa a raddrizzarvi i quadri appesi alla parete. Ha deciso che diventerà un web designer con la “doppia vvu” maiuscola, e trascorre intere nottate sveglio per realizzare il suo sogno.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

21 commenti

  1. jp
  2. fabio
  3. Fabio
  4. fabio
    • Fabio
    • fabio
  5. Daniele
  6. Michele
  7. Andrea

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo

Lascia un Commento

Current day month ye@r *