Crea un Accordionu solu HTML per ammuccià è Revelà u cuntenutu senza JS o CSS

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.

html5 accordion

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:

attribuillaValueSuntu
apartuapartuU difettu hè micca apertu.
id  valoreFornisce un identificatore unicu.
burghisìa  nomi di classiAssegna nomi di classi à l'elementu.
stile,  I valori CSSAssegna 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:

Mathias Ahlgren hè u CEO è fundatore di Website Rating, dirigendu una squadra glubale di editori è scrittori. Hà un maestru in scienza di l'infurmazione è gestione. A so carriera hà pivotatu à SEO dopu e prime esperienze di sviluppu web durante l'università. Cù più di 15 anni in SEO, marketing digitale è sviluppi web. U so focus include ancu a sicurità di u situ web, pruvata da un certificatu in Cyber ​​Security. Questa sperienza diversa sustene a so dirigenza Website Rating.

Home » Risorse è Strumenti » Crea un Accordionu solu HTML per ammuccià è Revelà u cuntenutu senza JS o CSS

Stà infurmatu! Unisci a nostra newsletter
Abbonate avà è uttene accessu gratuitu à guide, strumenti è risorse solu per l'abbonati.
Pudete unsubscribe in ogni mumentu. I vostri dati sò sicuru.
Stà infurmatu! Unisci a nostra newsletter
Abbonate avà è uttene accessu gratuitu à guide, strumenti è risorse solu per l'abbonati.
Pudete unsubscribe in ogni mumentu. I vostri dati sò sicuru.
Stà infurmatu! Unisci a nostra newsletter!
Abbonate avà è uttene accessu gratuitu à guide, strumenti è risorse solu per l'abbonati.
Stà à ghjornu! Unisci a nostra Newsletter
Pudete unsubscribe in ogni mumentu. I vostri dati sò sicuru.
A mo Cumpagnia
Stà à ghjornu! Unisci a nostra Newsletter
🙌 Sò (quasi) abbonati !
Andate in u vostru email inbox, è apre u email chì vi aghju mandatu per cunfirmà u vostru indirizzu email.
A mo Cumpagnia
Siete iscritti!
Grazie per u vostru abbonamentu. Mandemu una newsletter cù dati insightful ogni luni.
sparte à...