Tutorial Bootstrap Part 18 : Membuat Collapse di Bootstrap

Assalamu'alaikum W. W.

Abdul Hafid Gunawan - Hai Sobat setia SC Blog, berjumpa lagi di SC Blog kali ini saya akan mensharingkan tentang Membuat Collapse di Bootstrap.

PENGERTIAN

SleepingCodings - Collapse digunakan untuk menampilkan dan menyembunyikan sebuah text yang terdapat di content tersebut.

LATAR BELAKANG

Untuk mempersingkat waktu dalam pembuatan front-end website, yang mempunyai prioritas responsive & praktis.

MAKSUD DAN TUJUAN- Mampu menguasai, memahami dan menggunakan Bootstrap untuk mengembangkan skill Front-end Website.

- Collapse untuk hide dan show content sangat di perlukan saat membuat Website.

ALAT DAN BAHAN

- Text Editor

MEMBUAT COLLAPSE

Dalam penggunaan Class Collapse sendiri kita hanya perlu memanggil Class" yang telah di sediakan oleh Bootstrap dan tentunya jangan lupa memanggil Bootstrapnya seperti gambar di bawah ini :

Keterangan :

• Class Container digunakan untuk membuat sebuah Contain dengan layar sedang.
  
• Atribut data-toggle digunakan untuk mengontrol / membuat agar saat di klik bisa (show/hide).
  
• Atribut data-target digunakan sebagai target perujuk collapse.
  
• Id #click digunakan sebagai perujuk dari collapse tsb.
  
• Class Collapse digunakan untuk membuat sebuah Collapse.

KESIMPULAN

Collapse sangat memudahkan kita untuk hide dan show content, seperti 

REFERENSI

- www.w3schools.com/bootstrap4/bootstrap_collapse.html

Wassalamu'alaikum W. W.