Bagaimana Bekerja dengan Accordion di CSS3 - dummies

Anda menggunakan akordeon di CSS3 untuk menyembunyikan elemen halaman dari tampilan. Saat pengguna memilih kategori, elemen dalam kategori itu menjadi terlihat, dan elemen dari semua kategori lainnya disembunyikan. Efeknya adalah untuk memusatkan perhatian pengguna dan membuat pengguna lebih efisien dalam melakukan tugas tertentu. Kode berikut adalah semua yang Anda butuhkan untuk membuat fitur ini dapat digunakan.

$ (function () {$ ("# Configuration"). Accordion ();});

Kode ini ringkas, tapi rahasia dalam kasus ini adalah cara Anda membuat tag untuk halaman Anda. Perhatikan bahwa widget Accordion menyembunyikan dari tampilan pengaturan yang tidak difokuskan pengguna. Saat pengguna mengklik Background Color, opsi Foreground Color disembunyikan dari tampilan. Demikian juga, klik Options (Opsi) menunjukkan kontrol Opsi.

Kontrol di setiap area tidak penting bagi widget Accordion, tapi format HTML5 tidak. Formulir ini juga menyertakan tombol kirim. Jika Anda tidak mengonfigurasi kontrol dengan benar, tombol kirim menjadi bagian dari efek akordeon, dan mengkliknya tidak lagi mengirimkan formulir. Berikut adalah tampilan ringkas dari HTML5 untuk contoh ini:

Warna latar depan
Merah 

… Lebih banyak masukan dan label …

Warna Latar Belakang
Merah 

… Masukan dan label lebih …

Pilihan
Gunakan Special Sounds 

Use Special Effects

Perhatikan bahwa Anda harus menempatkan kelompok kontrol pos dalam label terpisah dan kemudian label itu sebagai yang ingin Anda gunakan untuk efek akordeon. Rumah terpisah mengendalikan individu untuk kelompok tertentu. Tombol kirim adalah bagian dari formulir, tapi di luar Konfigurasi.

Bila Anda mengklik tombol Change Configuration, Anda akan melihat bahwa formulir itu berfungsi sebagaimana mestinya - dengan memeriksa isi kolom alamat. Dengan menggunakan default, URL yang dihasilkan mengandung Accordion. html? Foreground = Merah & Latar Belakang = Merah saat Anda mengklik Ubah Konfigurasi.