Sempre tenendo presente il poco spazio disponibile su uno schermo mobile, è buona norma mettere in risalto le parti importanti di un testo, magari realizzando dei pannelli in cui sia visibile solo la parte principale del testo per poi mostrarne il resto su richiesta dell'utente, ad esempio al click di un bottone.
Il caso più classico di questo comportamento è rintracciabile nelle pagine FAQ, in cui, data la grande mole di contenuto, le domande vengono anche usate come controllo per mostrare la risposta collegata quando l'utente vi clicca sopra. E' un modo ingegnoso per risparmiare spazio.
jQuery Mobile implementa questa funzionalità (definita collapsible content) con un markup simile al seguente:
<div data-role="collapsible">
<h3>Questo è il testo visibile e cliccabile</h3>
<p>Contenuto collassato di default e visibile su richiesta.</p>
</div>La struttura presentata in alto non offre molta libertà a livello di strutturazione semantica, quindi è necessario verificare attentamente il contenuto per essere sicuri di raggiungere il risultato sperato.
I pannelli di questo tipo sono a loro volta innestabili, permettendo quindi di creare pannelli a scomparsa all'interno di un pannello contenitore per rendere più semplice l'organizzazione di contenuti altamente strutturati:
<!-- contenitore collassabile -->
<div data-role="collapsible">
<h3>Questo è il testo visibile e cliccabile</h3>
<!-- contenuto collassabile innestato -->
<div data-role="collapsible">
<h3>Primo paragrafo collassabile</h3>
<p>Contenuto collassato di default e visibile su richiesta.</p>
</div>
<!-- contenuto collassabile innestato -->
<div data-role="collapsible">
<h3>Secondo paragrafo collassabile</h3>
<p>Altro Contenuto collassato di default e visibile su richiesta.</p>
</div>
</div>Accordion
Quando le sezioni collassabili sono correlate fra loro risulta utile realizzare un accordion, ovvero un interfaccia che unisca visivamente i titolo delle sezioni e mostri alternativamente solo uno dei contenuti.
In questo modo è possibile mantenere sempre lo spazio occupato dai pannelli al minimo. Il markup per realizzare questa funzionalità non differisce molto da quello di un normale set di pannelli, ma prevede che essi sia contenuti in un elemento con attributo data-role="collapsible-set":
<div data-role="collapsible-set">
<!-- contenuto accordion -->
<div data-role="collapsible" data-collapsed="false">
<h3>Primo pannello accordion</h3>
<p>Contenuto collassato di default e visibile su richiesta.</p>
</div>
<!-- contenuto accodion -->
<div data-role="collapsible">
<h3>Secondo pannello accordion</h3>
<p>Altro Contenuto collassato di default e visibile su richiesta.</p>
</div>
</div>Come avrete notato dall'esempio, il primo pannello collassabile ha un attributo aggiuntivo data-collapsed="false". Questo attributo indica a jQuery Mobile di non collassare il contenuto all'avvio (comportamento di default), ma di mantenerlo visibile.
Sebbene questo sia un comportamento più tipico di un accordion che di un semplice pannello collassabile singolo, l'attributo data-collapsed="false" è comunque applicabile anche a quest'ultimo.
Come detto in precedenza, questo tipo di interfaccia è utilizzata spesso per le pagine FAQ. Ecco quindi come si presenta tale pagina nella nostra applicazione di test.
