Hallo teman-teman bertemu lagi pada tutorial Dumet school, kemarin kita sudah sedikit banyak belajar tentang tag-tag baru yang ada pada HTML2, Pembahasan kita saat ini masihlah tentang tag-rag atau element HTML5, Kali ini saya akan mendemokan tentang bagai mana Menyembunyikan dan Menampilkan Detail Konten dengan Tag datalist HTML5.

Sebelum kita membahas study case yang akan kita buat saya akan sedikit membahas fungsi dari tag datalist,

Fungsi dari tag datalist ialah digunakan untuk menampilkan daftar opsi atau (pilihan) yang diberikan pada sebuah input control dengan daftar pilihan (masukkan) yang sebelumnya kita buat sebelumnya.

Nah untuk lebih jelasnya kita langsung praktekan saja, pada study kasus kali ini kita akan membuat suatu pilihan dimana pilihan itu tidak muncul sebelum judul dari pilihannya kita klik dan kita buat ini pure menggunakan HTML, silahkan teman-teman buat sebuah file HTML dan ketikan script berikut:

Penjelasan dari script di atas adalah, saya membuat sepasang tag datalist yang dimana didalamnya terdapat tag summary sebagai judul dari lisnya, lalu saya membuat beberapa li didalam ul, jika teman-teman save maka hasilnya akan seperti berikut :

menyembunyikan-dan-menampilkan-detail-kontent-dengan-tag-datalis-html5

Dan jika teman-teman klik judul tersebut maka hasilnya akan seperti berikut:

menyembunyikan-dan-menampilkan-detail-kontent-dengan-tag-datalis-html5-hasil

Oke teman-teman cukup dulu untuk tutorial kali ini selamat mencoba.

Terimakasih.