Sapete chì ci hè una suluzione nativa HTML5 per creà assai facilmente un buttone di lettura di più / menu di accordione per ammuccià è revelà u cuntenutu cù NO JavaScript o CSS. Leghjite per sapè cumu.
lu e I tag HTML5 sò ufficialmente a Elementu di widget di divulgazione, ma a accumpagnatu cù Tag HTML5 vi darà un puro accordione HTML solu.
Meaning senza JS O CSS hè necessariu. Quantu hè bellu!
Eccu un esempiu chì mostra un elementu simplice cù a e .
Eccu u codice:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>è eccu cumu si vede:
Read More
Questu hè un accordione HTML5 nativu per ammuccià è revelà u cuntenutu. Piuttostu cool, nò?
Cumu viaghja? lu tag serve cum'è un involucro per un elementu chì pò esse apertu o chjusu. L'utilizatore hà da cliccà nantu à l'etichetta chì hè u tag per apre o chjude l'elementu.
Chì ci hè u stilu è u cumpurtamentu?
Styles
Pudete applicà u stilu CSS per persunalizà l'apparenza di a casella di testu di rivelazione. A sottu dà un stile di interfaccia tabulata:
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 automaticamente, u cursore appare cum'è una freccia, ma se vulete chì sia a manu puntata invece allora utilizate questu:
details {
cursor: pointer;
}Cumpurtamentu
Setting cumportamenti hè assai limitata, ci hè veramente una sola cosa chì pudete fà è questu hè di fà u testu revelatu apertu per difettu.
Per inizià l'accordione in u so statu apertu, aghjunghje u Boolean apartu attribuisce à u tag:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Read More
Questu hè un accordione HTML5 nativu per ammuccià è revelà u cuntenutu. Piuttostu cool, nò?
Chì attributi possu aduprà?
L'attributi sottu ponu esse usatu per u tag:
| attribuilla | Value | Suntu |
|---|---|---|
| apartu | apartu | U difettu hè micca apertu. |
| id | valore | Fornisce un identificatore unicu. |
| burghisìa | nomi di classi | Assegna nomi di classi à l'elementu. |
| stile, | I valori CSS | Assegna stili CSS à l'elementu. |
Allora chì sò e limitazioni? Ci hè sempre una cattura, nò ?
Nisun supportu per Internet Explorer
Questu accordione solu HTML5 ùn funziona micca in alcuna versione di Internet Explorer. Sè avete da avè u supportu IE11, duverete aduprà una soluzione di fallback differente cù JQuery. Tutti l'altri navigatori supportanu e .
Nisuna animazione persunalizata o transizioni
Mentre pudete mudificà è stilà l'aspettu (cum'è mostratu sopra), ùn puderete micca fà alcuna animazione o transizione di revelà testu. Se vulete fà quessa, avete bisognu di una altra suluzione CSS/JSS accordion.
Lettori di schermu è accessibilità
Questu hè nativu HTML5 è * deve esse * accessibile, ma hè statu trovu chì u testu rivelatu attuale ùn hè micca sempre annunziatu currettamente da un lettore di schermu.
Da vede:
