Buat Akordeon Khusus HTML untuk Menyembunyikan & Mengungkapkan Konten Tanpa JS atau CSS

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.

html5 akordeon

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:

AtributNilaiKesimpulan
BukaBukaDefaultnya adalah Tidak buka.
id  nilaiMemberikan pengidentifikasi unik.
kelas  nama kelasMenetapkan nama kelas ke elemen.
gaya  CSS-nilaiMenetapkan 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:

Mathias Ahlgren adalah CEO dan pendiri Website Rating, mengarahkan tim editor dan penulis global. Ia memegang gelar master dalam ilmu informasi dan manajemen. Kariernya beralih ke SEO setelah pengalaman awal pengembangan web selama kuliah. Dengan lebih dari 15 tahun di bidang SEO, pemasaran digital, dan pengembangan web. Fokusnya juga mencakup keamanan situs web, dibuktikan dengan sertifikat Keamanan Cyber. Keahlian yang beragam ini mendasari kepemimpinannya di Website Rating.

Beranda » Sumber Daya & Alat » Buat Akordeon Khusus HTML untuk Menyembunyikan & Mengungkapkan Konten Tanpa JS atau CSS

Tetap terinformasi! Bergabunglah dengan buletin kami
Berlanggananlah sekarang dan dapatkan akses gratis ke panduan, alat, dan sumber daya khusus pelanggan.
Anda dapat berhenti berlangganan kapan saja. Data Anda aman.
Tetap terinformasi! Bergabunglah dengan buletin kami
Berlanggananlah sekarang dan dapatkan akses gratis ke panduan, alat, dan sumber daya khusus pelanggan.
Anda dapat berhenti berlangganan kapan saja. Data Anda aman.
Tetap terinformasi! Bergabunglah dengan buletin kami!
Berlanggananlah sekarang dan dapatkan akses gratis ke panduan, alat, dan sumber daya khusus pelanggan.
Tetap terkini! Bergabunglah dengan Buletin kami
Anda dapat berhenti berlangganan kapan saja. Data Anda aman.
Perusahaanku
Tetap terkini! Bergabunglah dengan Buletin kami
🙌 Anda (hampir) berlangganan!
Buka kotak masuk email Anda, dan buka email yang saya kirimkan untuk mengonfirmasi alamat email Anda.
Perusahaanku
Anda Berlangganan!
Terima kasih atas langganan Anda. Kami mengirimkan buletin dengan data mendalam setiap hari Senin.
Bagikan ke...