Pada kesempatan kali ini saya akan menjelaskan fungsi tag <details> di HTML. perlu teman-teman ketahui sebelumnya, di HTML terdapat beberapa tag dengan masing-masing fungsinya, namun pada tag <details> tersebut dimana merupakan element interaktif yang bisa teman-teman gunakan untuk menentukkan detail rincian konten tambahan yang dapat ditampilkan atau disembunyikan oleh user. Namun secara defaultnya, teks maupun konten pada details element tersebut tidak akan ditampilkan pada jendela browser terkecuali attribute open disebutkan pada details element tersebut. Dalam penggunaan tag tersebut, <details> ditulis bersamaan dengan <summary> element di dalamnya yang digunakan sebagai judul atau teks yang akan ditampilkan. Atau singkatnya Elemen <details> tersebut untuk menentukan detail tambahan yang dapat dilihat atau disembunyikan oleh pengguna sesuai permintaan. Tag tersebut sama halnya dengan tag-tag lainnya, dimana memiliki attribute. Seperti contoh kasus disini, jika teman-teman ingin menjalankan JavaScript saat tag <details> tersebut dibuka atau ditutup, bisa memanfaatkan attribute tersebut. Dan saya akan memberikan contohnya dengan menggunakan attribute toggle, dan teman-teman bisa ikuti saya dengan mengikuti langkah-langkah seperti bawah ini.
Berikut Tahapannya :
- Teman-teman bisa buat folder project terlebih dahulu, dimana untuk folder tempat penyimpanan file yang akan dibuat selanjutnya
- Teman-teman buat terlebih dahulu satu buah file dengan nama index.html, yang tersimpan di folder yang sebelumnya sudah teman-teman buat
- Jika sudah, teman-teman bisa tuliskan kode seperti berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fungsi Tag <details> Di HTML - Dumet School</title>
<meta name="description" content="DUMET School adalah tempat kursus website di Jakarta, Depok, Bogor, Bekasi dan Tangerang terbaik 2017." />
</head>
<body>
<p>Contoh Penggunaan Attribute Ontoggle Di Tag <details> HTML</p>
<details ontoggle="myFunction()">
<summary>Lihat Daftar Anggota.</summary><br></details>
<script type="text/javascript">
function myFunction() {
alert("Aksi Attribute ontoggle berjalan!");
}
</script>
</body>
</html>
- Jika sudah, coba teman-teman jalankan di browser teman-teman, dan klik pada bagian text “Lihat Daftar Anggota” , maka akan menghasilkan element buka dan tutup, dan apabila di tekan maka akan menampilkan pesan box “Aksi Attribute ontoggle berjalan!”.
- Sampai disini penjelasan saya mengenai fungsi tag <details> di HTML, semoga bermanfaat.
The post Fungsi Tag details Di HTML appeared first on Kursus Website Terbaik.