Fungsi Tag details Di HTML

Di kesempatan kali ini saya akan menjelaskan manfaat tag <details> di HTML. perlu teman-teman ketahui sebelumnya, di HTML terdapat beberapa tag dengan masing-masing fungsinya, namun di tag <details> tersebut dimana adalah sebuah element interaktif yang dapat teman-teman gunakan bagi menentukkan detail rincian konten tambahan yang dapat ditampilkan atau disembunyikan oleh user. Namun secara defaultnya, teks maupun konten di details element tersebut tak akan ditampilkan di jendela browser terkecuali attribute open disebutkan di details element tersebut. Pada pemakaian tag tersebut, <details> ditulis bersamaan dengan <summary> element di dalamnya yang digunakan selaku judul atau teks yang akan ditampilkan. Atau singkatnya Faktor <details> tersebut bagi menentukan detail tambahan yang dapat dilihat atau disembunyikan oleh pengguna sesuai permintaan. Tag tersebut sama halnya dengan tag-tag lainnya, dimana mempunyai attribute. Seperti contoh kasus disini, apabila teman-teman ingin menjalankan JavaScript ketika tag <details> tersebut dibuka atau ditutup, dapat memanfaatkan attribute tersebut. Dan saya akan memberikan contohnya dengan menggunakan attribute toggle, dan teman-teman dapat ikuti saya dengan mengikuti strategi seperti bawah ini.



Berikut Tahapannya :




  • Teman-teman dapat bikin folder project terlebih dahulu, dimana bagi folder tempat penyimpanan file yang akan dibangun berikutnya


  • Teman-teman bikin terlebih dahulu satu buah file dengan nama index.html, yang tersimpan di folder yang sebelumnya telah teman-teman bikin


  • Apabila telah, teman-teman dapat 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>Guna Tag details Di HTML - Source Code Aplikasi</title>
<meta name=description content=Source Code Aplikasi yaitu tempat kursus blog di Jakarta, Depok, Bogor, Bekasi dan Tangerang terbaik 2017. />
</head>
<body> 
<p>Contoh Pemakaian Attribute Ontoggle Di Tag 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>



  • Apabila telah, coba teman-teman jalankan di browser teman-teman, dan klik di bagian text “Lihat Daftar Anggota” , karenanya akan menghasilkan element buka dan tutup, dan apabila di tekan karenanya akan menampilkan pesan box “Aksi Attribute ontoggle berjalan!”.


  • Hingga disini penjelasan saya mengenai manfaat tag <details> di HTML, semoga bermanfaat.




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more