Membuat Accordion FAQ Ringan dengan JavaScript
Accordion memungkinkan beberapa jawaban ditampilkan tanpa memenuhi layar. Untuk konten statis sederhana, elemen details bawaan HTML sebenarnya sudah cukup.
Hal yang perlu diperhatikan
- Buka tutup per pertanyaan
- Markup ramah keyboard
- Tidak perlu plugin
- Tampilan mudah disesuaikan
Cara menerapkannya
Mulailah dari versi paling sederhana dan pastikan struktur HTML tetap mudah dipahami. Setelah fungsi dasar bekerja, atur tampilan melalui CSS seperlunya. Coba skenario layar besar, layar kecil, serta kondisi ketika isi artikel lebih panjang dari perkiraan.
Contoh JavaScript
// Untuk FAQ sederhana, gunakan HTML bawaan:
// <details><summary>Pertanyaan</summary><p>Jawaban</p></details>
// JavaScript tambahan tidak diperlukan.Tips sebelum dipublikasikan
- Utamakan details dan summary saat memungkinkan.
- Jangan sembunyikan informasi penting tanpa petunjuk.
- Uji navigasi menggunakan keyboard.
Catatan untuk pengguna FajriLab
Contoh ini dibuat sebagai materi demonstrasi untuk menguji gaya artikel FajriLab. Sesuaikan kode, pengaturan, dan kebutuhan aksesibilitas sebelum digunakan pada situs produksi.
Saat artikel sebenarnya siap diterbitkan, ganti gambar sementara, perbarui isi sesuai hasil pengujian, lalu periksa tautan serta tampilan responsif. Artikel contoh ini tidak dimaksudkan sebagai klaim bahwa suatu produk atau fitur sudah tersedia.
Komentar
Posting Komentar