Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Pada tutorial kali ini saya akan mencoba membagi Cara Membuat Show dan Hide Content Menggunakan HTML5.

Seberapa sering anda harus menulis beberapa JavaScript untuk membuat widget interaktif yang menunjukkan dan menyembunyikan beberapa konten? Anda mungkin sudah mencoba menggunakan JavaScript untuk membuat show dan hide.

Nah, sekarang waktunya untuk bergembira, karena HTML5 menyediakan cara untuk membuat fitur show dan hide konten ini, dengan hanya beberapa baris HTML dan tidak ada JavaScript. Di sini saya akan menggunakan tag <details> untuk membuatnya.

Sekarang saya akan memberikan trickCara Membuat Show dan Hide Content Menggunakan HTML5. berikut langkah-langkahnya:

– Pertama teman-teman buat struktur dasar HTML5 dulu seperti kode HTML5 di bawah ini :

Jangan lupa save dengan nama index.html

– Kedua teman-teman ketikan tag <details>:

Nah, Tag <details> ini lah yang akan membuat efek show dan hide pada konten

– Ketiga ketigan tag <summary> untuk text yang akan kita jadikan acuan untuk membuka dan menutup konten:

Apabila kita tidak menggunakan tag <summary> maka yang text yang akan menjadi acuannya adalah details.

– Keempat teman-teman masukan konten yang ingin di isi. Di sini saya akan meberikan contoh konten yang saya isi:

– Kelima teman-teman tambahkan cssnya seperti di bawah ini:

Di sini saya menggunakan metode internal CSS, kita akan beri selector :hover pada summary dan beri property cursor yang ber-value pointer.

– Hasilnya akan menjadi seperti ini.

cara-membuat-open-dan-hide-content-menggunakan-html5-1

– Dan pada saat di klik Dumetschool maka konten akan tampil seperti gambar di bawah:

cara-membuat-open-dan-hide-content-menggunakan-html5-2

Bagaimana teman-teman mudahkan Cara Membuat Show dan Hide Content Menggunakan HTML5.  

Sekian tutorial saya untuk kali ini. Sehat selalu ya teman-teman, selamat mencoba.