Corsi on-line

Mostrare e nascondere contenuti con CSS3

Solitamente, effetti come quelli finalizzati a mostrare e nascondere contenuti senza ricaricare la pagina corrente vengono ottenuti grazie all’adozione di soluzioni basate su JavaScript, magari tramite framework come jQuery. Ad oggi abbiamo a disposizione nuovi strumenti per conseguire lo stesso risultato, essi vengono forniti dai Web standards più recenti; in precedenza è stata proposta una procedura interamente basata su HTML5, ora faremo ricorso a CSS3 e soltanto ad esso.

In sostanza, l’esempio proposto prevede di mostrare un contenuto (nel nostro caso un comune elenco puntato) al momento del caricamento, l’utente avrà la passibilità di nasconderlo in qualsiasi momento semplicemente clickando sul collegamento denominato “[nascondi]”; clickando successivamente sul link chiamato “[Mostra]” sarà possibile rendere nuovamente visibile il contenuto nascosto:

<!DOCTYPE html>
<head>
 <title>Mostra e nascondi con CSS3</title>
 <style type="text/css">
 .mostra { display: none; }
 .nascondi:focus + .mostra { display: inline; }
 .nascondi:focus { display: none; }
 .nascondi:focus ~ #elenco { display:none; }
 @media print { .nascondi, .mostra { display: none; } }
 </style>
</head>
<body>
 <p>Un semplice elenco</p>
 <div>
 <a href="#" class="nascondi">[nascondi]</a>
 <a href="#" class="mostra">[mostra]</a>
 <ol id="elenco">
 <li>blah 1</li>
 <li>blah 2</li>
 <li>blah 3</li>
 <li>......</li>
 </ol>
 </div>
 <p>Lorem ipsum..</p>
</body>
</html>

 

Chiaramente, quando verrà visualizzato l’elenco il link “[mostra]”, in questo caso inutile, non sarà disponibile (.mostra { display: none; }):

1Nello stesso modo, il collegamento “nascondi” diverrà inutile, e quindi non visibile, nel cosa in cui il contenuto non sia disponibile (.nascondi:focus { display: none; }):

2Tutto ciò che viene posizionato al di fuori della divbox che funge da contenitore per i link, e l’elenco con i quali questi ultimi interagiscono, sarà visibile indipendentemente dall’evento inizializzato dal click.

Post correlati
I più letti del mese
Tematiche