Membangun Akordeon PE
Buat akordeon yang berfungsi tanpa JavaScript, lalu tingkatkan kemampuannya.
Membangun Akordeon PE adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Tujuan: Akordeon yang Berfungsi Tanpa JS
Versi PE dari akordeon hanya menggunakan HTML — pasangan elemen bawaan <details>/<summary>. Klik ringkasan untuk membuka atau menutup panel. Berfungsi tanpa CSS, tanpa JS, dan tanpa kerangka kerja: semuanya sudah tersedia di dalam HTML.
<details>
<summary>What is HTML?</summary>
<p>HTML is the markup language of the web.</p>
</details>Aksesibilitas Bawaan
<summary> adalah tombol yang dapat menerima fokus dan diaktifkan dengan papan ketik (Enter/Spasi untuk beralih). Pembaca layar mengumumkan status diperluas/diciutkan. Dua elemen HTML menyediakan hal yang pada akordeon React khusus dapat memerlukan puluhan baris ARIA dan penanganan peristiwa.
Pelapisan CSS
Atur gaya segitiga pengungkapan, jarak dalam panel, dan transisi menggunakan CSS biasa. Atribut open mencerminkan status, sehingga details[open] summary { color: blue; } hanya diterapkan saat elemen diperluas. Tidak diperlukan JS untuk penyempurnaan visual.
details { border-bottom: 1px solid #ccc; padding: 8px 0; }
summary { font-weight: bold; cursor: pointer; }
details[open] summary { color: var(--accent); }Menganimasikan Pembukaan dan Penutupan
Pembukaan dan penutupan bawaan berlangsung seketika. Animasikan dengan mentransisikan visibilitas konten atau menggunakan JS yang mengukur tinggi panel lalu menganimasikan tinggi maksimum. Untuk kasus sederhana, peralihan mendadak dapat diterima; animasi adalah penyempurnaan CSS+JS yang diterapkan secara bertahap.
Menyempurnakan dengan JavaScript
JS dapat menambahkan fitur tambahan: menutup akordeon lain saat salah satunya dibuka (mode hanya satu yang terbuka), mempertahankan status terbuka di localStorage, menganimasikan transisi, atau melacak melalui analitik entri mana yang diperluas. Setiap penyempurnaan sepenuhnya bersifat tambahan.
document.querySelectorAll("details").forEach((d) => {
d.addEventListener("toggle", () => {
if (d.open) {
document.querySelectorAll("details").forEach((o) => {
if (o !== d) o.removeAttribute("open");
});
}
});
});Peristiwa Pengalihan
<details> memicu peristiwa toggle setiap kali status terbukanya berubah. Gunakan peristiwa ini untuk merespons perluasan oleh pengguna tanpa menata ulang penangan klik. Kompatibel dengan klik tetikus maupun aktivasi papan ketik.
Merender Status di Server
Untuk merender akordeon yang awalnya terbuka, tetapkan atribut open di sisi server: <details open>. Statusnya berada dalam HTML, sehingga dapat diakses oleh perayap dan pengguna dengan koneksi lambat sebelum JS apa pun dijalankan.
Saat Fitur Bawaan Tidak Cukup
Jika desain memerlukan ikon perluasan/penciutan khusus, tampilan yang muncul secara beranimasi, atau panel beberapa kolom, buat versi khusus — tetapi gunakan <details>/<summary> sebagai struktur dasarnya jika memungkinkan. Tambahkan ARIA hanya jika Anda sama sekali tidak dapat menggunakan elemen bawaan tersebut.
Verifikasi Tanpa JS
Nonaktifkan JavaScript di DevTools dan verifikasi bahwa akordeon tetap berfungsi: klik ringkasan, panel beralih, urutan fokus tetap logis, dan papan ketik dapat mengaktifkannya. Jika ada yang rusak, JS bukan lagi penyempurnaan — melainkan persyaratan, yang melanggar PE.
Satu Terbuka Saja dengan CSS
Untuk perilaku seperti tombol radio, yaitu "hanya satu yang terbuka pada satu waktu" tanpa JS, gunakan atribut name pada <details> (didukung di Chrome/Safari): semua <details name="faq"> berbagi status, sehingga membuka satu akan menutup yang lain. Ini adalah pola HTML murni yang menyerupai tombol radio.
Migrasi dari Akordeon yang Hanya Menggunakan JS
Ganti elemen div+JS dengan <details>/<summary>, tetapi pertahankan kelas CSS untuk penataan gaya. Hasilnya adalah HTML yang lebih singkat, tanpa ketergantungan pada JS, aksesibilitas yang lebih baik, dan konten yang dapat diindeks. Sebagian besar akordeon JS dapat dimigrasikan ke PE dengan perubahan yang terlihat pengguna secara minimal.
Pemeriksaan Pengetahuan
Pasangan elemen HTML apa yang menyediakan akordeon yang berfungsi sepenuhnya tanpa JavaScript?
Ringkasan
Akordeon PE menggunakan <details>/<summary> bawaan sebagai dasar — sepenuhnya aksesibel dan dapat dikendalikan dengan papan ketik tanpa JS. Tambahkan CSS untuk penataan visual, dan secara opsional JS untuk animasi atau perilaku satu terbuka. Verifikasikan dengan menonaktifkan JS bahwa dasar akordeon tetap berfungsi. Atribut name yang baru bahkan memungkinkan mode satu terbuka hanya dengan CSS.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Membangun Akordeon PE” gratis?
Ya — teks lengkap “Membangun Akordeon PE” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Membangun Akordeon PE”?
Buat akordeon yang berfungsi tanpa JavaScript, lalu tingkatkan kemampuannya. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Membangun Akordeon PE” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Filosofi PE Mulai dengan HTML
- Deteksi Fitur vs Pengintaian Peramban
- Degradasi Anggun vs Peningkatan Progresif
- Membangun Akordeon PE