Menampilkan dan Menyembunyikan Objek dengan onclick Event
0 views
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
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
Objek di atas sebetulnya ada 2 yaitu merah dan hijau, sebut saja id nya
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 :
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....
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
Blok Hidden
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 inidocument.getElementById('nama-id').style.display='pihan-tampilan'
Banyak yang bisa dilakukan dengan onclick Event ini, seperti membuat spoiler.Spoiler : Show
Spoiler : Hide

Silahkan sobat berkreasi dengan kreasi sobat. Semoga bermanfaat....
87 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
matur nuwun
(gagapseo.com)
bisa kasih solusi nya kang ? kalau untuk menu dropdown seperti ini ?
http://jsfiddle.net/P9a24/embedded/result/
:) keren kang
http://stabilou.blogspot.com
Selengkapnya : [url=http://blog.kangismet.net/2013/10/membuat-posting-dan-komentar-dalam-tab-view.html]Membuat Posting dan Komentar dalam Tab View[/url]
mampir yah ke blog ane :)
- salam damai -
http://saeful13.blogspot.com/2013/09/membuat-widget-parse-html.html
<input checked='' id='opt1' type='checkbox' />
<input checked='' id='opt4' type='checkbox' />
<input checked='' id='opt5' type='checkbox' />
hatur tengkyu
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
Masih teu ngartos keneh kang, :(
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>404: Page Not Found ~ <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
</b:if>
mending nongkrong didie ah ..sabari ngopi plus molen ... !!
Selengkapnya : [url=http://blog.kangismet.net/2010/05/menyimpan-gambar-di-blogger-blogspot.html]Cara Menyimpan / Upload Gambar di Blogspot[/url]
Spoiler : <a class="smallbutton" href="javascript:void(0)" onclick="document.getElementById('spoiler').style.display='block';document.getElementById('hide').style.display='block';document.getElementById('show').style.display='none'">Show</a></div>
<div id="hide">
Spoiler : <a class="smallbutton" href="javascript:void(0)" onclick="document.getElementById('spoiler').style.display='none';document.getElementById('hide').style.display='none';document.getElementById('show').style.display='block'">Hide</a></div> untuk id nya gunakan spoiler <div id='spoiler' style='display:none'>
isi spoiler
</div>
makasih udah share kang ismet!
- Blogwalking -
ane izin coba terapin :D
#salam damai!
Ada tutor nya Kang? Haturnuhun Kang Ismet
kode tombol
</div>
Langsung di praktekan nih Kang, terima kasih atas
Artikel nya, salam juga Kanggo Kang Kompi senior
Sim kuring, salam sejahtera, Kang Ismet Kang Kompi
saya tunggu zikazev-zikazev yang lebih wow dan lebih fresh :D
Kenging bensin teu nya? wkwkwkwkw