Belajar Java Script Bagian 4 : Toggle Function

Bismillah... Masih seru belajar JAVA SCRIPT, kali ini saya akan menjelaskan tentang Toggle Function. Toggle fucntion ini biasanya digunakan untuk menampilkan dan menyembunyikan Elemen atau widget tertentu.

Coba kalian KLIK menu TUTORIAL diatas untuk contoh Toggle Function.

Untuk membuatnya kalian tinggal menyimpan script berikut di atas kode </head>

<script>
function toggle(){
var div1 = document.getElementById('div1')
if (div1.style.display == 'none') {
div1.style.display = 'block'
} else {
div1.style.display = 'none'
}
}
</script>

Kemudian, kalian cari elemen yang mau kalian tampilkan atau hilangkan, misalkan Buku Tamu dengan Fungsi Toggle.

<div id='div1' style='display:none'>

SIMPAN KODE BUKU TAMU DISINI

</div>

Untuk pemanggilannya, kalian bisa menggunakan kode berikut :

<a href='javascript: toggle()'>KLIK DISINI UNTUK MEMbUKA BUKU TAMU</a>

Jika Ingin menggunakan gambar sebagai media Link, gunakan kode ini :

<a href='javascript: toggle()'><img src="URL GAMbAR"></a>

Semoga Bermanfaat

Catatan :
Script kode diatas adalah contoh dasar, masih banyak kode untuk toggle Function yang lebih menarik