Menampilkan dan Menyembunyikan Objek dengan onclick Event

Onclick Event - Postingan kali ini berasal dari pertanyaan sahabat +Yandi Mulyadi tentang Postingan dan Komentar dalam tab yang berbeda. Untuk detail pertanyaan bisa lihat disini. Intinya, saya akan sedikit menjelaskan cara kerja onClick Event dalam menampilkan atau menyembunyikan objek dengan id tertentu.

Pengertian onClick Event sendiri adalah, menjalankan fungsi javascript ketika button / tombol di klik. Sebetulnya banyak attribut onclick event ini, namun sesuai judul saya hanya akan menjelaskan tentang menyembunyikan atau menampilkan kode saja.

Gambarannya seperti di bawah ini :

Munculkan HijauSembunyikan Hijau

Blok Utama

Objek di atas sebetulnya ada 2 yaitu merah dan hijau, sebut saja id nya merah dan hijau. Syarat utamanya si hijau harus disembunyikan dengan display:none terlebih dahulu.

Lihat Tombol pertama (Munculkan Hijau), kita membuat tombol perintah : apabila diklik tombol, maka tampilkan si hijau dan sembunyikan si merah. Kode HTML nya sepeti ini :

<a href="javascript:void(0)" onclick="document.getElementById('hijau').style.display='block';document.getElementById('merah').style.display='none'">Munculkan Hijau</a>

Sebaliknya dengan tombol ke-2 (Sembunyikan Hijau), perintahnya : apabila tombol diklik maka sembunyikan si hijau dan munculkan si merah.

<a href="javascript:void(0)" onclick="document.getElementById('hijau').style.display='none';document.getElementById('merah').style.display='block'">Sembunyikan Hijau</a>

rahasianya ada pada kode ini

document.getElementById('nama-id').style.display='pihan-tampilan'

Banyak yang bisa dilakukan dengan onclick Event ini, seperti membuat spoiler.

Spoiler : Show

Caranya sama saja, kita harus jeli objek mana yang akan disembunyikan dan objek mana yang akan ditampilkan. Sebagai gambaran saja, ketika klik button 'Show' maka gambar dan button 'Hide' ditampilkan, dan buton 'Show' disembunyikan. Sebaliknya ketika tombol 'Hide' di klik, maka gambar dan tombol 'Hide' disembunyikan, button 'Show' ditampilkan.

Silahkan sobat berkreasi dengan kreasi sobat. Semoga bermanfaat....

Facebook

Twitter

Google+

Pinterest

Posted by : Rizal Firdaus

Add Comment

Minggu, 29 Maret 2015