Hari ini kita akan melakukan percobaan lagi dengan saudara berdekatan dan umum combinator dan: checked pseudo-class. Menggunakan input tersembunyi dan label, kita akan menciptakan sebuah akordeon yang akan menghidupkan daerah konten pada pembukaan dan penutupan.
Ada banyak variasi dari CSS-hanya akordion di sekitar, sebagian besar yang diimplementasikan dengan menggunakan: target pseudo-class. Masalah dengan menggunakan: target adalah bahwa kita tidak bisa menutup bidang isi lagi atau memiliki beberapa bagian terbuka pada saat yang sama. Dengan menggunakan kotak centang tersembunyi, kita dapat mengontrol pembukaan dan penutupan. Atau, kita juga bisa menggunakan tombol radio jika hanya satu bagian harus terbuka pada suatu waktu.
Jadi, mari kita mulai! Catatan: hasil dari tutorial ini hanya akan bekerja sebagaimana dimaksud pada browser yang mendukung CSS3 properti digunakan.
