Nascondere elementi

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.