Tahukah Anda bahwa ada solusi HTML5 asli untuk dengan mudah membuat akordeon baca lebih banyak/kurang tombol untuk menyembunyikan dan menampilkan konten dengan TANPA JavaScript atau CSS. Baca terus untuk mengetahui caranya.
Grafik dan Tag HTML5 secara resmi adalah elemen widget pengungkapan, Tetapi dipasangkan dengan Tag HTML5 akan memberi Anda akordeon khusus HTML murni.
Arti tidak ada JS ATAU CSS dibutuhkan. Betapa kerennya itu!
Berikut adalah contoh yang menunjukkan elemen sederhana dengan dan .
Berikut kodenya:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>
dan inilah tampilannya:
Baca Selengkapnya
Ini adalah akordeon HTML5 asli untuk menyembunyikan dan mengungkapkan konten. Cukup keren, bukan?
Bagaimana cara kerjanya? Grafik tag berfungsi sebagai pembungkus suatu elemen yang dapat dibuka atau ditutup. Pengguna harus mengklik label yang tag untuk membuka atau menutup elemen.
Bagaimana dengan gaya dan perilaku?
Gaya
Anda dapat menerapkan gaya CSS untuk menyesuaikan tampilan kotak teks terbuka. Di bawah ini memberikan 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;
}
Secara default, kursor muncul seperti panah, tetapi jika Anda menginginkannya menjadi menunjuk tangan alih-alih gunakan ini:
details {
cursor: pointer;
}
Perilaku
Pengaturan perilaku sangat terbatas, hanya ada satu hal yang dapat Anda lakukan dan itu adalah membuat teks yang terungkap buka secara default.
Untuk memulai akordeon dalam keadaan terbuka, tambahkan Boolean Buka atribut ke menandai:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>
Baca Selengkapnya
Ini adalah akordeon HTML5 asli untuk menyembunyikan dan mengungkapkan konten. Cukup keren, bukan?
Atribut apa yang dapat saya gunakan?
Atribut di bawah ini dapat digunakan untuk menandai:
Atribut | Nilai | Kesimpulan |
---|---|---|
Buka | Buka | Defaultnya adalah Tidak buka. |
id | nilai | Memberikan pengidentifikasi unik. |
kelas | nama kelas | Menetapkan nama kelas ke elemen. |
gaya | CSS-nilai | Menetapkan gaya CSS ke elemen. |
Jadi apa batasannya? Selalu ada tangkapan, bukan?
Tidak ada dukungan untuk Internet Explorer
Akordeon khusus HTML5 ini tidak akan berfungsi di versi Internet Explorer apa pun. Jika Anda harus mendukung IE11, Anda harus menggunakan solusi mundur yang berbeda menggunakan JQuery. Semua browser lain mendukung dan .
Tidak ada animasi atau transisi yang disesuaikan
Meskipun Anda dapat mengubah dan menata tampilan (seperti yang ditunjukkan di atas), Anda tidak akan dapat melakukan animasi atau transisi pengungkapan teks apa pun. Jika Anda ingin melakukannya, Anda memerlukan solusi akordeon CSS/JSS lainnya.
Pembaca layar dan aksesibilitas
Ini asli HTML5 dan *harus* dapat diakses tetapi ternyata teks yang diungkapkan sebenarnya tidak selalu diumumkan dengan benar oleh pembaca layar.
Referensi: