Halo Bapak ibu dan sahabat Berbagi Tutorial, Pernahkan Bapak ibu membuat soal di blog serta dilengkapi dengan pembahasannya? dimana pembahasannya bisa di tampilkan dan bisa di sembunyikan? Seperti Contoh Soal Di bawah ini :
Contoh Soal
Pak Ahmad dan Pak Joko masing-masing membeli sebungkus makanan kucing dengan merek sama, namun beratnya berbeda. Kemasan yang dibeli Pak Ahmad tertulis berat 1.200 gram dan kemasan yang dibeli Pak Joko tertulis seberat 1,5 kg. Perbandingan berat pakan ikan yang dibeli Pak Ahmad dan Pak Joko adalah ....
A. 4 : 5 C. 3 : 2
B. 3 : 1 D. 2 : 3
Dengan collapse maka sobat bisa menampilkan dan menyembunyikan suatu elemen atau menu. Untuk macamnya juga ada banyak sesuai dengan kebutuhan dan keinginan sobat sendiri bisa menggunakan link, button, gambar dan lain-lain. Berikut adalah cara membuat menu collapse :
Tentunya sebelum membuat collapse/accordion kita perlu file css/js dari bootstrap dan fontawesome. Kegunaan file dari fontawesome adalah untuk menampilkan icon plus dan minusnya Jika tidak ada tentu tidak bisa tapil iconnya. Namun jika sobat tidak ingin menggunakan fontawesome sebenarnya bisa saja nanti pada bagian incon sobat ubah menjadi simbol tambah (+) dan kurang (-) namun menurut saya itu kurang bagus. Letakkan kode dibawah diantara tag <head>
untuk js-nya bisa diletakkan di tag <head> atau tag <body> paling bawah
DOWNLOAD SCRIPT
Setelah Semua Script diatas di tambahkan di HTML Blog Selanjutnya tinggal buat postingan dan jika ingin menambahkan Collapse Bisam menggunakan Script Di bawah ini.
Scrip ini di letakkan di Postigan di mode HTML :
DOWNLOAD SCRIPT
Dan jika Bapak ibu dan sahabat semua jalankan maka hasilnya akan menjadi seperti dibawah
Pada contoh-contoh diatas saya kira mudah untuk dipahami dan jika ada pertanyaan atau kebingungan maka bapak ibu dan sahabat bisa tinggalkan komentar pada kolom komentar dibawah. Sekian postingan saya tentang Cara Membuat Collapse dan Accordion pada HTML Menggunakan Bootstrap 4. Jika ada kesalahan saya mohon maaf.
Lebih Jelasnya silahkan Lihat Video Berikut
Post a Comment