Kita kembali dengan pembahasan tentang jQuery Mobile. Terakhir kita bicara bagaimana cara membuat daftar menggunakan ListView. Sekarang kita coba latihan tentang Collapsible.
Collapsible mirip dengan accordion. Apa pula itu accordion 😆 ??? Intinya begini, ada suatu teks atau kotak atau objek tertentu yang mana ketika diklik akan memunculkan teks atau objek lain. Kemunculan objek lain ini biasanya berada di bawahnya.
Nah, konsep ini banyak digunakan ketika suatu situs ingin menampilkan beberapa hal yang biasa ditanyakan atau akan menjadi pertanyaan pengunjung. Lalu dibuatlah daftar pertanyaan beserta jawabannya. Tetapi yang ditampilkan pertama hanya daftar pertanyaan saja, ketika pertanyaan diklik baru tampil jawabannya. Konsep ini pasti akan meminimalkan tampilan di layar.
Sudah mulai paham? Ya gapapa kalau belum 😆
Bagaimana cara membuat Collapsible?
Collapsible digunakan bersama-sama dengan collapsible-set. Format standarnya adalah seperti berikut ini:
<div data-role="collapsibleset">
<div data-role="collapsible">
<h3>Ini Pertanyaan?</h3>
<p>Iya, ini jawaban dari pertanyaan di atas.</p>
</div>
</div>
Format ini diletakkan di dalam objek data-role="content".
Lalu bagaimana jika pertanyaannya lebih dari 1? Mudah, pembuatan contoh FAQ ini sangat mudah. Tinggal duplikat saja kode di atas sebanyak apa pertanyaan dan jawaban yang ingin ditampilkan.
Oke, langsung saja kita coba contoh latihannya. Silakan ketik kode berikut, simpan dengan nama file jqm_collapsible.html. Perlu diingat ya di mana meletakkan filenya, jika lupa silakan baca lagi Pengantar Aplikasi Web Mobile.
Ini kodenya: