ButtonsLesson 105Preview gratis
Read More Read Less
Lesson ini bagian dari How To · Semua level
Ringkasan
Read more read less adalah pola untuk menyembunyikan sebagian teks panjang dan menampilkannya saat pengguna menekan tombol. Setelah terbuka, tombol berubah menjadi read less untuk melipat kembali konten. Animasi tinggi yang halus membuat perubahan terasa nyaman, sementara atribut aria-expanded menjaga aksesibilitas.
Poin kunci
- Teks tambahan disembunyikan dengan max-height: 0 dan overflow: hidden.
- Class terbuka menaikkan max-height sehingga konten dapat dianimasikan.
- JavaScript men-toggle class dan mengganti label tombol.
- Atribut aria-expanded memberi tahu pembaca layar apakah konten sedang terbuka.
- Gunakan max-height yang cukup besar atau ukur scrollHeight agar konten panjang tidak terpotong.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.