Lumikha ng HTML-Only Accordion para Magtago at Magbunyag ng Nilalaman (Walang JS o CSS)

in Mga mapagkukunan at tool

Alam mo ba na mayroong isang katutubong HTML5 na solusyon upang napakadaling lumikha ng isang accordion read more/less button upang itago at ipakita ang nilalaman gamit ang WALANG JavaScript o CSS. Magbasa para malaman kung paano.

html5 akurdyon

Ang at Ang mga HTML5 tag ay opisyal na a elemento ng widget ng pagsisiwalat, Ngunit ang ipares sa Ang mga HTML5 tag ay magbibigay sa iyo ng a purong HTML-lamang na akurdyon.

Ibig sabihin walang JS O CSS ay kailangan. Gaano kagaling iyan!

Narito ang isang halimbawa na nagpapakita ng isang simpleng elemento na may a at .

Narito ang code:

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

at narito ang magiging hitsura nito:

Magbasa Pa

Ito ay isang katutubong HTML5 accordion upang itago at ipakita ang nilalaman. Medyo cool, tama?

Paano ito gumagana? Ang  Ang tag ay nagsisilbing isang wrapper para sa isang elemento na maaaring buksan o isara. Ang user ay kailangang mag-click sa label na ang tag para buksan o isara ang elemento.

Paano ang pag-istilo at pag-uugali?

Estilo

Maaari mong ilapat ang CSS styling upang i-customize ang hitsura ng reveal text box. Ang ibaba ay nagbibigay ng naka-tab na istilo ng interface:

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

Bilang default, lumilitaw ang cursor na parang arrow, ngunit kung gusto mo itong maging a nakaturo ang kamay sa halip ay gamitin ito:

details {
cursor: pointer;
}

Mga Pagkilos

Ang pagtatakda ng mga pag-uugali ay napakalimitado, mayroon lamang talagang isang bagay na maaari mong gawin at iyon ay upang gawin ang ipinahayag na teksto bukas bilang default.

Upang simulan ang akurdyon sa bukas na estado nito, idagdag ang Boolean buksan katangian sa mga tag:

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

Ito ay isang katutubong HTML5 accordion upang itago at ipakita ang nilalaman. Medyo cool, tama?

Anong mga katangian ang maaari kong gamitin?

Ang mga katangian sa ibaba ay maaaring gamitin para sa mga tag:

katangianhalagaBuod
buksanbuksanAng default ay hindi bukas.
id  halagaNagbibigay ng natatanging identifier.
klase  mga pangalan ng klaseNagtatalaga ng mga pangalan ng klase sa elemento.
estilo  CSS-valuesNagtatalaga ng mga istilo ng CSS sa elemento.

Kaya ano ang mga limitasyon? Laging may nahuhuli, di ba?

Walang suporta para sa Internet Explorer

Ang HTML5-only accordion na ito ay hindi gagana sa anumang bersyon ng Internet Explorer. Kung kailangan mong suportahan ito sa IE11 kakailanganin mong gumamit ng ibang fallback na solusyon gamit ang JQuery. Sinusuportahan ng lahat ng iba pang mga browser at .

Walang customized na animation o transition

Bagama't maaari mong baguhin at i-istilo ang hitsura (tulad ng ipinapakita sa itaas), hindi ka makakagawa ng anumang text na nagpapakita ng mga animation o transition. Kung gusto mong gawin iyon, kakailanganin mo ng isa pang solusyon sa kordyon ng CSS/JSS.

Mga screen reader at accessibility

Ito ay katutubo HTML5 at ito *dapat* naa-access ngunit napag-alaman na ang aktwal na ipinahayag na teksto ay hindi palaging inaanunsyo nang tama ng isang screen reader.

Sanggunian:

Tungkol sa May-akda

Matt Ahlgren

Si Mathias Ahlgren ay ang CEO at tagapagtatag ng Website Rating, namumuno sa isang pandaigdigang pangkat ng mga editor at manunulat. Siya ay mayroong master's sa information science at management. Ang kanyang karera ay nag-pivote sa SEO pagkatapos ng mga unang karanasan sa web development sa unibersidad. Na may higit sa 15 taon sa SEO, digital marketing, at web developmens. Kasama rin sa kanyang pagtuon ang seguridad sa website, na pinatunayan ng isang sertipiko sa Cyber ​​Security. Ang magkakaibang kadalubhasaan na ito ay nagpapatibay sa kanyang pamumuno sa Website Rating.

Home » Mga mapagkukunan at tool » Lumikha ng HTML-Only Accordion para Magtago at Magbunyag ng Nilalaman (Walang JS o CSS)
Ibahagi sa...