Corsi on-line

Elementi espandibili e collassabili con HTML5

In genere gli elementi di pagina espandibili e collassabili vengono realizzati utilizzando JavaScript puro o librerie come per esempio jQuery; ma forse non tutti sanno che lo stesso effetto potrebbe essere ottenuto utilizzando semplicemente HTML5, senza dover fare riferimento ad alcun frammento di codice per lo scripting client side; vediamo come.

<details open="open">
  <summary>Clicka qui</summary>
  <p>Questo paragrafo è un elemento espandibile e collassabile.</p>
</details>

Questo particolare effetto potrà quindi essere ottenuto grazie all’uso congiunto dei tag “details” (accompagnato dall’attributo “open”) e “summary” (che dovrà delimitare l’elemento clickabile); copiate il codice proposto e testatelo, scoprirete così se il vostro browser supporta o meno questa nuova feature portata con se da HTML5.

Post correlati
I più letti del mese
Tematiche