Je! unajua kuwa kuna suluhisho asili la HTML5 la kuunda kwa urahisi kitufe cha kusoma zaidi/chini ili kuficha na kufichua yaliyomo na HAKUNA JavaScript au CSS. Soma ili kujua jinsi gani.
The na Lebo za HTML5 ni rasmi a kipengele cha wijeti ya ufichuzi, Lakini jozi na Lebo za HTML5 zitakupa a accordion safi ya HTML pekee.
Maana hakuna JS AU CSS inahitajika. Jinsi nzuri ni kwamba!
Hapa kuna mfano unaoonyesha kipengele rahisi na a na .
Nambari ni hii:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>na hii ndio jinsi itaonekana:
Soma zaidi
Hii ni accordion asili ya HTML5 kuficha na kufichua maudhui. Pretty cool, sawa?
Jinsi gani kazi? The tag hutumika kama kanga kwa kipengele kinachoweza kufunguliwa au kufungwa. Mtumiaji anapaswa kubofya kwenye lebo ambayo ni tag kufungua au kufunga kipengele.
Vipi kuhusu mtindo na tabia?
Mitindo
Unaweza kutumia mtindo wa CSS ili kubinafsisha mwonekano wa kisanduku cha maandishi wazi. Ifuatayo inatoa mtindo wa kiolesura cha kichupo:
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;
}Kwa chaguo-msingi, mshale unaonekana kama mshale, lakini ikiwa unataka kuwa a kuelekeza mkono badala yake tumia hii:
details {
cursor: pointer;
}Furaha
Kuweka tabia ni mdogo sana, kuna jambo moja tu unaloweza kufanya nalo ni kutengeneza maandishi yaliyofichuliwa fungua kwa chaguo-msingi.
Ili kuanza accordion katika hali yake wazi, ongeza Boolean kufungua sifa kwa lebo:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Soma zaidi
Hii ni accordion asili ya HTML5 kuficha na kufichua maudhui. Pretty cool, sawa?
Je, ninaweza kutumia sifa gani?
Sifa zilizo hapa chini zinaweza kutumika kwa ajili ya lebo:
| Sifa | Thamani | Muhtasari |
|---|---|---|
| kufungua | kufungua | Chaguo msingi ni sio wazi. |
| id | thamani | Hutoa kitambulisho cha kipekee. |
| darasa | majina ya darasa | Hukabidhi majina ya darasa kwa kipengele. |
| style | Maadili ya CSS | Hukabidhi mitindo ya CSS kwa kipengele. |
Hivyo ni mapungufu gani? Kuna samaki kila wakati, sivyo?
Hakuna msaada kwa Internet Explorer
Accordion hii ya HTML5-pekee haitafanya kazi katika toleo lolote la Internet Explorer. Ikiwa itabidi iunge mkono IE11 itabidi utumie suluhisho tofauti la kurudi nyuma kwa kutumia JQuery. Vivinjari vingine vyote vinaunga mkono na .
Hakuna uhuishaji maalum au mabadiliko
Ingawa unaweza kurekebisha na kuweka mtindo wa mwonekano (kama inavyoonyeshwa hapo juu), hutaweza kufanya maandishi yoyote kufichua uhuishaji au mabadiliko. Ikiwa unataka kufanya hivyo utahitaji suluhisho lingine la accordion ya CSS/JSS.
Visoma skrini na ufikiaji
Hii ni asili HTML5 na *lazima* kufikiwa lakini imepatikana kuwa maandishi halisi yaliyofichuliwa huwa hayatangazwi ipasavyo na kisoma skrini.
Marejeo: