Cara Membuat Show dan Hide Content Menggunakan HTML5

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 :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Details</title>
</head>
<body>


</body>
</html>

Jangan lupa save dengan nama index.html

– Kedua teman-teman ketikan tag <details>:

<body>

<details>
    
</details>

</body>

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:

<details>
    <summary>Dumetschool</summary>
</details>

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:

<details>
    <summary>Dumetschool</summary>
    <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
    
    <h2>Web Master</h2>
               
    <ol>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
    </ol>
    
    <h3>Web Programming</h3>
    
    <ul>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
    </ul>
</details>

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

<style type="text/css">
  summary:hover{cursor:pointer;}
</style>

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.

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

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.