Gawe HTML Accordion -> Singidaken & Bukak Konten Tanpa JS/CSS

Apa sampeyan ngerti manawa ana solusi HTML5 asli supaya gampang nggawe akordion maca liyane / kurang tombol kanggo ndhelikake lan mbukak konten nganggo Ora ana JavaScript utawa CSS. Maca kanggo mangerteni carane.

The lan tag HTML5 resmi a unsur pambocoran widget, nanging dipasangake karo HTML5 tags bakal menehi a akordion mung HTML murni.

Artine ora JS UTAWA CSS dibutuhake. Carane kelangan iku!

Punika conto sing nuduhake unsur prasaja karo a lan .

Iki kode:

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

lan iki bakal katon:

Iki minangka akordion HTML5 asli kanggo ndhelikake lan mbukak konten. Apik banget, bener?

Carane ora iku bisa? The tag serves minangka pambungkus kanggo unsur sing bisa dibukak utawa ditutup. Pangguna kudu ngeklik label kasebut tag kanggo mbukak utawa nutup unsur.

Kepiye babagan gaya lan prilaku?

gaya

Sampeyan bisa nggunakake gaya CSS kanggo ngatur tampilan kothak teks mbukak. Ing ngisor iki menehi gaya antarmuka tab:

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

Kanthi gawan, kursor katon kaya panah, nanging yen sampeyan pengin dadi a nuding tangan tinimbang banjur gunakake iki:

details {
cursor: pointer;
}

Tumindak

Setelan prilaku diwatesi banget, pancen mung siji sing bisa ditindakake yaiku nggawe teks sing dicethakaké mbukak kanthi gawan.

Kanggo miwiti akordion ing negara mbukak, nambah Boolean mbukak atribut kanggo tags:

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

Iki minangka akordion HTML5 asli kanggo ndhelikake lan mbukak konten. Apik banget, bener?

Apa atribut sing bisa digunakake?

Atribut ing ngisor iki bisa digunakake kanggo tags:

ngubungake	Value	Summary
mbukak	mbukak	Default yaiku ora mbukak.
id	Nilai	Nyedhiyakake pengenal unik.
kelas	jeneng kelas	Menehi jeneng kelas kanggo unsur.
gaya	CSS-nilai	Nemtokake gaya CSS menyang unsur kasebut.

Dadi apa watesan? mesthi ana sing nyekel, ta?

Ora ana dhukungan kanggo Internet Explorer

Akordion mung HTML5 iki ora bisa digunakake ing versi Internet Explorer apa wae. Yen sampeyan kudu ndhukung IE11, sampeyan kudu nggunakake solusi mundur sing beda nggunakake JQuery. Kabeh browser liyane ndhukung lan .

Ora ana animasi utawa transisi sing disesuaikan

Nalika sampeyan bisa ngowahi lan nggawe gaya tampilan (kaya sing dituduhake ing ndhuwur), sampeyan ora bakal bisa nindakake animasi utawa transisi teks apa wae. Yen sampeyan pengin nindakake, sampeyan butuh solusi akordion CSS/JSS liyane.