L’etiqueta HTML <details> especifica detalls addicionals que es poden mostrar o amagar, a voluntat.
<details> es pot fer servir per crear una àrea que l’usuari podrà obrir i tancar; a dintre s’hi pot posar qualsevol tipus de contingut. Aquí pots veure’n un exemple (fes clic a “Més informació”):
Més informació
– Els drets sobre les imatges depenen de cada autor; consulteu-ho abans de fer-les servir.
“All content and graphics on this web site are the property of each author. Check it before using them.”
I aquest és el codi que he fet servir:
<details> <summary>Més informació</summary> <p> - Els drets sobre les imatges depenen de cada autor; consulteu-ho abans de fer-les servir.</p> <p>All content and graphics on this web site are the property of each author. Check it before using them.</p> </details>
L’etiqueta <summary> serveix per especificar un encapçalament visible per a <details>, i és el que l’usuari pot clicar per mostrar o amagar els detalls en qüestió.
NOTA: El contingut de l’element <details> està amagat, per defecte (necessitaria l’atribut open per mostrar-se obert d’entrada).
| open | open | Especifica que els detalls han d’estar a la vista (“obert”) per l’usuari |
Alternatives CSS-JavaScript
display: none / display: block
Tabs
–> fade tabs
Accordion
–> slide down
Deixa un comentari