Kelas Collapsible digunakan untuk menyembunyikan maklumat daripada paparan sehinggalah ia diaktifkan menggunakan butang. Kaedah ini membolehkan paparan anda kelihatan bersih dan kemas.

Kaedah ini juga membenarkan pengunjung membaca kandungan panjang tanpa perlu scroll ke atas dan ke bawah.

Kelas ini secara asalnya dicipta dengan tujuan menghasilkan menu yang boleh disembunyikan sama ada pada ruangan atas atau sisi paparan laman sesawang (web). Dengan perkembangan teknologi, bukan hanya teks, malah video dan imej juga boleh dimanipulasikan.

Tanpa membuang masa, mari kita teruskan dengan latihan minggu ini.

Semakan

Menerusi latihan tadi, kita telah mepelajari kaedah memaparkan menyembunyikan maklumat seperti teks, video dan imej menggunakan kelas collapsible. Masukkan sahaja kelas tersebut kepada <div> yang sesuai dan gunakan kelas sokongan accordion. Subkelas card-body turut digunakan untuk mendapatkan paparan yang lebih menarik.

Kelas data toggle pula digunakan untuk mengaktifkan kelas utama collapsible sama ada memaparkan atau menyembunyikan. Jika pengguna menekan butang pemula ketika maklumat tersembunyi, maklumat tadi akan dipaparkan dan sebaliknya.

Soalan

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan.

1. Tambah satu imej ke dalam Collapsible pertama

2. Ubah warna latar Collapsible kedua

3. Masukkan imej atau video ke dalam kandungan dan cuba papar atau sembunyi.

Jika anda mempunyai sebarang pertanyaan atau cadangan, sila tinggalkan komen di www.farizgaskin.com dan kami akan cuba jawab sepantas mungkin.

Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!