Unda Accordion ya HTML Pekee ili Kuficha na Kufichua Maudhui (Hakuna JS au CSS)

in Rasilimali na Vyombo

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.

html5 accordion

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:

SifaThamaniMuhtasari
kufunguakufunguaChaguo msingi ni sio wazi.
id  thamaniHutoa kitambulisho cha kipekee.
darasa  majina ya darasaHukabidhi majina ya darasa kwa kipengele.
style  Maadili ya CSSHukabidhi 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:

Kuhusu Mwandishi

Matt Ahlgren

Mathias Ahlgren ndiye Mkurugenzi Mtendaji na mwanzilishi wa Website Rating, kuongoza timu ya kimataifa ya wahariri na waandishi. Ana shahada ya uzamili katika sayansi ya habari na usimamizi. Kazi yake iliegemea kwa SEO baada ya uzoefu wa mapema wa ukuzaji wa wavuti wakati wa chuo kikuu. Kwa zaidi ya miaka 15 katika SEO, uuzaji wa dijiti, na waendelezaji wa wavuti. Mtazamo wake pia ni pamoja na usalama wa tovuti, unaothibitishwa na cheti katika Usalama wa Mtandao. Utaalam huu wa anuwai ndio msingi wa uongozi wake Website Rating.

Endelea kufahamishwa! Jiunge na jarida letu
Jisajili sasa na upate ufikiaji bila malipo kwa miongozo, zana na rasilimali za wanaojisajili pekee.
Unaweza kujiondoa wakati wowote. Data yako iko salama.
Endelea kufahamishwa! Jiunge na jarida letu
Jisajili sasa na upate ufikiaji bila malipo kwa miongozo, zana na rasilimali za wanaojisajili pekee.
Unaweza kujiondoa wakati wowote. Data yako iko salama.
Shiriki kwa...