Spesso si ha la necessità di nascondere e mostrare elementi della pagina in base a determinate esigenze o azioni dell'utente. Ad esempio con box di conferma, gallerie di immagini, etc.
La tecnica più comune e, soprattutto più popolare, consiste nell'utilizzare la regola CSS display:none. È il principio su cui sono basati anche i principali framework per Javascript e in pratica consiste nell'ignorare l'elemento e comportarsi come se non esistesse del tutto.
Il funzionamento della regola è semplicissimo, basta combinarla con display:block per mostrare l'elemento. Vediamo un semplicissimo esempio con l'ausilio di jQuery. Nell'esempio, cliccando sul link, verrà mostrato/nascosto il contenuto di un div modificando la proprietà display del CSS.
Il codice utilizzato è il seguente:
div#hide {
display: none;
}
$(function(){
$('#click').click(function(){
if( $('#hide').css('display') == 'block' )
$('#hide').css('display','none');
else
$('#hide').css('display','block');
return false;
});
});Semplicemente andiamo a verificare se l'oggetto è già mostrato o meno in maniera da cambiarne lo stato. Possiamo vedere l'esempio a questo link. Attraverso jQuery non sarebbe stato necessario tutto il codice utilizzato, sarebbe stato sufficiente utilizzare il metodo toggle() ma, per comprendere il funzionamento della regola CSS, si è preferito mostrare il codice per intero.
Nascondere gli elementi in maniera accessibile
Come detto in precedenza, la regola display:none va a nascondere l'elemento della pagina. L'elemento, quindi, viene ignorato del tutto dai browser che non ne tengono conto in nessun caso. Tale interpretazione, però, è valida anche per browser non convenzionali come quelli testuali o gli screen reader. Questo vuol dire che gli utenti disabili che navigano all'interno del sito non possono accedere a tali informazioni.
Vediamo insieme una tecnica che ci consente di nascondere gli elementi all'interno della pagina in maniera del tutto accessibile. La proprietà che andremo a sfruttare è position che ci consente di spostare la posizione dell'elemento a nostro piacimento. Più precisamente andremo ad utilizzare una regola simile alla seguente:
div#hide {
position: absolute;
left: -9999px;
}L'elemento viene anche in questa maniera tolto dalla pagina ma resta comunque visibile ai browser testuali e gli screen reader. Utilizziamo lo stesso esempio precedente con la nuova proprietà, il codice è il seguente:
$(function(){
$('#click').click(function(){
if( $('#hide').css('left') == '-9999px' )
$('#hide').css('left','0');
else
$('#hide').css('left','-9999px');
return false;
});
});Possiamo vedere l'esempio a questo link.
