Oħloq Accordion bl-HTML biss biex taħbi u tikxef il-kontenut (l-ebda JS jew CSS)

in Riżorsi u Għodda

Kont taf li hemm soluzzjoni nattiva HTML5 biex toħloq faċilment buttuna taqra aktar/inqas accordion biex taħbi u tiżvela kontenut bi LE JavaScript jew CSS. Kompli aqra biex issir taf kif.

html5 accordion

il u, It-tikketti HTML5 huma uffiċjalment a element tal-widget ta' żvelar, Iżda l- flimkien ma ' It-tikketti HTML5 jagħtuk a accordion pur HTML biss.

Tifsira ebda JS JEW CSS hija meħtieġa. Kemm hu jibred hekk!

Hawn eżempju li juri element sempliċi b'a u, .

Hawn il-kodiċi:

<details>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>

u hawn kif se tidher:

Aqra iktar

Dan huwa accordion nattiv HTML5 biex jaħbi u jiżvela l-kontenut. Pjuttost jibred, hux?

Kif taħdem? il  tikketta sservi bħala tgeżwir għal element li jista 'jinfetaħ jew jingħalaq. L-utent irid ikklikkja fuq it-tikketta li hija l- tag biex tiftaħ jew tagħlaq l-element.

Xi ngħidu dwar l-istil u l-imġieba?

Stili

Tista' tapplika l-istil CSS biex tippersonalizza d-dehra tal-kaxxa tat-test jiżvela. Dan hawn taħt jagħti stil ta' interface b'tabbed:

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;
}

B'mod awtomatiku, il-cursor jidher bħal vleġġa, imma jekk trid li tkun a idejn tipponta minflok imbagħad uża dan:

details {
cursor: pointer;
}

Imgieba

L-issettjar tal-imgieba huwa limitat ħafna, hemm verament ħaġa waħda biss li tista 'tagħmel u li hija li tagħmel it-test żvelat miftuħa awtomatikament.

Biex tibda l-accordion fl-istat miftuħ tiegħu, żid il-Boolean tiftaħ attribut lill - tikketta:

<details open>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>
Aqra iktar

Dan huwa accordion nattiv HTML5 biex jaħbi u jiżvela l-kontenut. Pjuttost jibred, hux?

Liema attributi nista' nuża?

L-attributi hawn taħt jistgħu jintużaw għall- tikketta:

Attributvalursommarju
tiftaħtiftaħIn-nuqqas huwa mhux miftuħ.
id  valurJipprovdi identifikatur uniku.
klassi  ismijiet tal-klassiJassenja l-ismijiet tal-klassi lill-element.
istil  CSS-valuriJassenja stili CSS lill-element.

Allura x'inhuma l-limitazzjonijiet? Dejjem hemm qabda, hux?

L-ebda appoġġ għall-Internet Explorer

Dan l-accordion HTML5 biss mhux se jaħdem fl-ebda verżjoni tal-Internet Explorer. Jekk ikollok bżonn li tappoġġja IE11 ser ikollok tuża soluzzjoni alternattiva differenti billi tuża JQuery. Il-browsers l-oħra kollha jappoġġjaw u, .

Ebda animazzjonijiet jew transizzjonijiet personalizzati

Filwaqt li tista 'timmodifika u tfassal id-dehra (kif muri hawn fuq), ma tkun tista' tagħmel xi test tiżvela animazzjonijiet jew transizzjonijiet. Jekk trid tagħmel dan, ikollok bżonn soluzzjoni CSS/JSS accordion oħra.

Screen readers u aċċessibbiltà

Dan huwa indiġenu HTML5 u *għandu jkun* aċċessibbli iżda nstab li t-test attwali żvelat mhux dejjem jitħabbar b'mod korrett minn screen reader.

Referenzi:

Dwar l-Awtur

Matt Ahlgren

Mathias Ahlgren huwa l-Kap Eżekuttiv u l-fundatur ta Website Rating, imexxi tim globali ta' edituri u kittieba. Huwa għandu master's fix-xjenza tal-informazzjoni u l-ġestjoni. Il-karriera tiegħu mxiet lejn is-SEO wara esperjenzi bikrija tal-iżvilupp tal-web matul l-università. B'aktar minn 15-il sena fis-SEO, il-marketing diġitali, u l-iżvilupp tal-web. L-enfasi tiegħu tinkludi wkoll is-sigurtà tal-websajt, evidenzjata minn ċertifikat fis-Cyber ​​Security. Din il-kompetenza diversa tirfed it-tmexxija tiegħu fi Website Rating.

home » Riżorsi u Għodda » Oħloq Accordion bl-HTML biss biex taħbi u tikxef il-kontenut (l-ebda JS jew CSS)

Ibqa' infurmat! Ingħaqad man-newsletter tagħna
Abbona issa u ksib aċċess b'xejn għal gwidi, għodod u riżorsi għall-abbonati biss.
Tista' tneħħi l-abbonament fi kwalunkwe ħin. Id-dejta tiegħek hija sigura.
Ibqa' infurmat! Ingħaqad man-newsletter tagħna
Abbona issa u ksib aċċess b'xejn għal gwidi, għodod u riżorsi għall-abbonati biss.
Tista' tneħħi l-abbonament fi kwalunkwe ħin. Id-dejta tiegħek hija sigura.
Aqsam lil...