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.
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:
| katangian | halaga | Buod |
|---|---|---|
| buksan | buksan | Ang default ay hindi bukas. |
| id | halaga | Nagbibigay ng natatanging identifier. |
| klase | mga pangalan ng klase | Nagtatalaga ng mga pangalan ng klase sa elemento. |
| estilo | CSS-values | Nagtatalaga 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:
