In questo articolo vedremo come sfruttare i checkbox e la pseudo-classe CSS :checked per realizzare un classico effetto show/hide, ovvero mostrare e rendere visibile al click una porzione di contenuto in partenza nascosta.
Ci concentreremo unicamente sull'essenza della tecnica, senza produrre demo particolarmente accattivanti o creative. Per farsi un'idea delle potenzialità di questo metodo e dei possibili campi di applicazione sarà sufficiente dare un'occhiata a questi esempi:
- CSS Only Show/Hide: l'autore applica la tecnica nello scenario di un articolo di blog di cui si voglia nascondere inizialmente il testo completo;
- Accordion with CSS3 (demo) mostra l'effetto in azione su un accordion verticale;
- Futurebox (che fa uso dei radio buttons al posto dei checkbox) è un esperimento tendente a realizzare un Lightbox senza Javascript.
Come funziona
Partiamo dal markup HTML con cui abbiamo creato la base della nostra demo:
<div id="demo">
<input id="check" type="checkbox" />
<label for="check">Show me!</label>
<p>Lorem ipsum dolor sit amet […]</p>
</div>Ecco un'anteprima:
La parte importante è la prima. Abbiamo inserito un checkbox assegnandogli l'id #check e abbiamo associato al checkbox una label. Ricordiamo che quando si associa una label ad un input di tipo checkbox possiamo attivare (check/uncheck) il controllo anche cliccando su questa etichetta. È esattamente su questa funzionalità HTML che si fonda la tecnica di cui qui si discute!
Il paragrafo che segue sarà la sezione che mostreremo/nasconderemo agendo sulla label.
Nel secondo esempio abbiamo implementato la tecnica. Caricando la pagina è questo ciò che ci appare:
Vediamo nell'ordine come procedere usando i CSS.
Per prima cosa dobbiamo nascondere il checkbox. A noi interessa solo la label, perché anche se il checkbox non è visibile potremo usarla ugualmente per attivarlo e disattivarlo. In pratica, in questa tecnica, la label sarà l'elemento che attiva l'effetto. Ecco il codice CSS:
input#check {
display:none;
}Alla label possiamo associare qualunque stile, non abbiamo limiti. Nella nostra demo ci siamo limitati ad assegnare un colore rosso per differenziarla dal paragrafo. Cosa più importante, abbiamo impostato un cursore a manina per rendere evidente che possiamo cliccarci per attivare qualcosa:
label[for="check"] {
cursor: pointer;
color: red;
}Inizialmente il paragrafo dovrà essere nascosto, per cui usiamo la proprietà visibility (si poteva comunque usare display:none o qualunque altra tecnica, a seconda delle esigenze o delle necessità):
#demo p {
visibility: hidden;
}Manca solo un pezzo per completare il puzzle: la regola CSS che consente di mostrare il paragrafo nascosto quando si clicca sulla label attivando il checkbox. Eccola:
input#check:checked ~ p {
visibility: visible;
}Cosa abbiamo scritto? Quando l'input con id #check è attivato (:checked) rendi visibile il paragrafo che è un suo fratello (~). Cliccando nuovamente sulla label, il checkbox sarà disattivato, ovvero sarà nello stato :unchecked, per cui il paragrafo tornerà ad essere invisibile.
Come si vede, tutto si basa su un uso accorto della pseudo-classe :checked e dei selettori CSS, nello specifico del selettore generale di fratelli ~.
La tecnica funziona su tutti i browser che supportano :checked e i selettori CSS2. Non dunque su IE7 e IE8. Per allargare il supporto a questi due browser si potrà fare ricorso a librerie come IE9.js di Dean Edwards o Selectivizr (in questo caso si dovrà usare anche un framework come jQuery).
Gli esempi sono disponibili per il download.
Approfondimenti
Chiudiamo con i rimandi alle lezioni della nostra guida CSS3 dedicate agli argomenti di cui abbiamo parlato nell'articolo:
