INTERACTIVE ELEMENT html5, LEZIONE 6: Details e summary

ELEMENTO DETAILS e SUMMARY

L’elemento details, ovvero dettagli, è usato per inserire nel blog o sito delle informazioni che possono o meno essre nascoste.
L’elemento Html <details>è usato come widget, da cui è possibile richiedere delle informazioni che possono essere mostrate su richiesta.
L’elemento details si trova spesso all’interno di un box che contiene informazioni nascoste.

L’elemento summary  ha un titolo visibile che può essere cliccato e una volta cliccato si apriranno i dettagli nascosti, che verranno visualizzati nella pagina.


All’interno del tag <details> si può aggiungere anche un ulteriore widget interattivo, l’attributo boleano  <open> .
Se è presente il tasto open , le informazioni sono visibili da subito e quindi si possono nascondere in seguito.

<details open=”open”>
<summary>copyright</summary>
<p> Questo blog è di proprietà di MyWeb </p>
</details>

copyright

Questo blog è di proprietà di MyWeb

Senza l’elemento open

<details>
<summary>copyright</summary>
<p> Questo blog è di proprietà di MyWeb </p>
</details>
 

copyright

Questo blog è di proprietà di MyWeb

  • HTML
  • javascript
  • CSS

Potrebbero interessarti anche...