Sabíeu que hi ha una solució HTML5 nativa per crear molt fàcilment un botó de llegir més/menys d'acordió per amagar i revelar contingut amb NO JavaScript ni CSS. Continua llegint per saber com.
El i Les etiquetes HTML5 són oficialment a element del widget de divulgació, Però la combinat amb Les etiquetes HTML5 us donaran un acordió pur només HTML.
Significat sense JS NI CSS és necessari. Que xulo!
Aquí teniu un exemple que mostra un element senzill amb a i .
Aquí teniu el codi:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>i així és com quedarà:
Més...
Aquest és un acordió HTML5 natiu per amagar i revelar contingut. Molt xulo, oi?
Com funciona? El L'etiqueta serveix com a embolcall per a un element que es pot obrir o tancar. L'usuari ha de fer clic a l'etiqueta que és etiqueta per obrir o tancar l'element.
Què passa amb l'estil i el comportament?
Estils
Podeu aplicar l'estil CSS per personalitzar l'aparença del quadre de text de revelació. A continuació es mostra un estil d'interfície amb pestanyes:
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details[open] > summary {
background-color: #ccf;
}Per defecte, el cursor apareix com una fletxa, però si voleu que sigui a mà apuntant en comptes d'això, feu servir això:
details {
cursor: pointer;
}Comportaments
La configuració de comportaments és molt limitada, realment només hi ha una cosa que pots fer i és fer el text revelat obert per defecte.
Per iniciar l'acordió en el seu estat obert, afegiu el booleà obrir atribut a etiqueta:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Més...
Aquest és un acordió HTML5 natiu per amagar i revelar contingut. Molt xulo, oi?
Quins atributs puc utilitzar?
Els atributs següents es poden utilitzar per a etiqueta:
| Atribut | Valor | resum |
|---|---|---|
| obrir | obrir | El valor per defecte és no obert. |
| id | valor | Proporciona un identificador únic. |
| class | noms de classe | Assigna noms de classe a l'element. |
| estil | Valors CSS | Assigna estils CSS a l'element. |
Quines són, doncs, les limitacions? Sempre hi ha una trampa, no?
No hi ha suport per a Internet Explorer
Aquest acordió només HTML5 no funcionarà en cap versió d'Internet Explorer. Si heu de fer-lo compatible amb IE11, haureu d'utilitzar una solució alternativa diferent mitjançant JQuery. Tots els altres navegadors són compatibles i .
No hi ha animacions ni transicions personalitzades
Tot i que podeu modificar i estilitzar l'aparença (com es mostra més amunt), no podreu fer cap animació o transició que reveli el text. Si voleu fer-ho, necessitareu una altra solució d'acordió CSS/JSS.
Lectors de pantalla i accessibilitat
Això és autòcton HTML5 i *hauria de ser* accessible, però s'ha trobat que el text revelat real no sempre és anunciat correctament per un lector de pantalla.
Referències:
