Beranda
Javascript

Menampilkan dan Menyembunyikan Objek dengan onclick Event

0 views
show and hide
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
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 ini
document.getElementById('nama-id').style.display='pihan-tampilan'
Banyak yang bisa dilakukan dengan onclick Event ini, seperti membuat spoiler.

Spoiler : Show
Spoiler : Hide

pantai
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....

87 komentar

Disqus
1. Komentar ini, diurutkan dari yang terbaru
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.
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. makasih tutorialnya mas, btw minta ijin mas saya nyomot CSS + Javascriptnya buat konversi + emoticon nya :)
    matur nuwun
    (gagapseo.com)
    Hapus Komentar
  2. masih bingunx nih kang untuk penambahan ID nya :(

    bisa kasih solusi nya kang ? kalau untuk menu dropdown seperti ini ?

    http://jsfiddle.net/P9a24/embedded/result/
    Hapus Komentar
  3. Ngikut gabung ama orang orang kondang
    :) keren kang
    Hapus Komentar
  4. Kang sudah saya terapka dan jadi mksh yah
    http://stabilou.blogspot.com
    Hapus Komentar
  5. punten kang kalau objeknya gambar dan lebih dari 2 penerapan codenya seperti apa ya ?
    Hapus Komentar
    • Hapus Balasan
      masing2 pake id tertentu, soalnya kalau idnya sama, nanti kebuka semua
  6. Kang.. kalo nerapin ini tuk blok komentar, gimana caranya ya?
    Hapus Komentar
    • Hapus Balasan
      seperti yang udah saya tulis kemaren kang

      Selengkapnya : [url=http://blog.kangismet.net/2013/10/membuat-posting-dan-komentar-dalam-tab-view.html]Membuat Posting dan Komentar dalam Tab View[/url]
  7. Bagus deh kang tombolnya :D tampilannya juga tambah keren :D
    Hapus Komentar
  8. wew mantab kang :)
    mampir yah ke blog ane :)
    - salam damai -
    Hapus Komentar
  9. Kang Ismet Memang Masternya Blogger,Infonya Selalu Menambah Motivasi Untuk Terus Belajae Dan belajar Lagi
    Hapus Komentar
    • Hapus Balasan
      masih jauh untuk kelas master, emang dalam hidup ini ga ada berhenti belajar kan? :)
  10. Kang nyungken bantosan validasi di halaman post ieu kumaha ?
    http://saeful13.blogspot.com/2013/09/membuat-widget-parse-html.html
    Hapus Komentar
    • Hapus Balasan
      intinya gini kang.. CSS berlaku untuk semua, kecuali dengan penambahan atribut scoped, trus checked='true' tidak berlaku untuk boolean attribute, cukup checked='checked' atau checked='' atau checked. validasi :<style type='text/css' scoped=''>
      <input checked='' id='opt1' type='checkbox' />
      <input checked='' id='opt4' type='checkbox' />
      <input checked='' id='opt5' type='checkbox' />
  11. bagus banget nih,,,!! Tutorialnya keren bang!
    Hapus Komentar
  12. Mas , cara membuat kotak yang dibawah komentar (Terimakasih telah berkomentar) itu gimana caranya? :)
    Hapus Komentar
    • Hapus Balasan
      itu pake background gambar ko
  13. menarik ni, tapi di satu postingan tidak bisa memasukkan lebih dari satu id ya kang? barusan ane nyoba bikin dua show hide spoiler, pas ane klik show spoiler yang kedua yang pertama jg ngikut show itemnya.. mungkin kalau diberi style di css, show hide nya jd lebih bagus kang :)

    hatur tengkyu
    Hapus Komentar
    • Hapus Balasan
      betul.. harus beda id.. untuk style, diedit aja :)
  14. Kang,menambahkan tag kondisional pada halaman error dibwah ini gimna ya ?
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <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, :(
    Hapus Komentar
    • Hapus Balasan
      pabeulit nya :) <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <title><data:blog.pageTitle/></title>
      <b:else/>
      <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
      <title>404: Page Not Found ~ <data:blog.title/></title>
      <b:else/>
      <title><data:blog.pageName/> ~ <data:blog.title/></title>
      </b:if>
      </b:if>
  15. ternyata kalau pandai dalam menggunakan CSS, blog, artikel jadi terlihat lebih bagus dan elegan nih kang ismet
    Hapus Komentar
  16. ciaek... ada penampakan hari ini |o| :-bd
    Hapus Komentar
    • Hapus Balasan
      sehari ngilang, bertapa di gunung gede.. eh ketemu wiro sableng wkwkkwkw :D :D
  17. Udat - edit ae rudet jadina kang , angger we gobet hasilna teh ( lieurrr kang ) hehe
    mending nongkrong didie ah ..sabari ngopi plus molen ... !!
    Hapus Komentar
    • Hapus Balasan
      Bagi - bagi atuh kopi sareng molenna, mumpung lagi laper nih haha
    • Hapus Balasan
      keren kang.. masukan ieu mah, kumaha pami di homepage fontna rada di tuaan deui rada serab :)
  18. maaf OoT kang, cara upload gambar ukuran besar, misal untuk background full gimana kang?
    Hapus Komentar
    • Hapus Balasan
      kalau saya sih bikin posting khusus gambar, tapi ga dipublish. cukup liat urlnya

      Selengkapnya : [url=http://blog.kangismet.net/2010/05/menyimpan-gambar-di-blogger-blogspot.html]Cara Menyimpan / Upload Gambar di Blogspot[/url]
  19. Simple kang, penggunaannya mirip kayak Tab Comment dan Post pada blog Maz Waone ya. :D
    Hapus Komentar
    • Hapus Balasan
      benul.. emang konsep awalnya pertanyaan masalah itu sob
  20. mantab kang :D
    Hapus Komentar
  21. saya masih bingung kang gmana bikin spoiler show hide gtu kalau kita mau posting sesuatu di blog...saya masih belom mengerti betul kang...kalau hanya bikin spoiler show hide gtu gmna ya kang..???
    Hapus Komentar
    • Hapus Balasan
      <div id="show">
      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>
  22. wach bagus nie kang ismet bisa juga untuk menyembunyikan yang lain juga kang lebih efektif :-d
    Hapus Komentar
    • Hapus Balasan
      Awas jangan buat nyembunyiin selingkuhan mas wkwkwkwkwk
    • Hapus Balasan
      iya kang tutornnya makasih ngakeng aja :D
      makasih udah share kang ismet!
      - Blogwalking -
  23. wew keren kang :)
    ane izin coba terapin :D
    #salam damai!
    Hapus Komentar
  24. Keren Kang Ismet, tapi kami sangat tertarik dengan Widget 'Rekomendasi Untuk Anda' nya.

    Ada tutor nya Kang? Haturnuhun Kang Ismet
    Hapus Komentar
    • Hapus Balasan
      Ke sini aja mas, udah ada tutornya /2013/09/membuat-slide-box-rekomendasi-di-blogger.html :D
  25. Pami tombolna disimpen di lebet blok warna tiasa teu kang....
    Hapus Komentar
    • Hapus Balasan
      tiasa kang <div id='hijau'>
      kode tombol
      </div>
  26. Wah kenging elmu anyar deui nih saya Kang Ismet..
    Langsung di praktekan nih Kang, terima kasih atas
    Artikel nya, salam juga Kanggo Kang Kompi senior
    Sim kuring, salam sejahtera, Kang Ismet Kang Kompi
    Hapus Komentar
    • Hapus Balasan
      sami kang... mangga dicobian :)
  27. Simple tapi manfaatna ageung kang :D nuhun ah.
    Hapus Komentar
  28. simple oge kang :)
    Hapus Komentar
  29. kang udah gk update template zikazev lagi toh ?
    saya tunggu zikazev-zikazev yang lebih wow dan lebih fresh :D
    Hapus Komentar
    • Hapus Balasan
      hehhe.. belom sempet.. mungkin kapan2
  30. Biasanya kodenya tinggal mungut hanya ngatur dengan CSS untuk tombolnya saja Kang hehehehe...dengan pemahaman js ini jadi lebih ngerti cara kerja js-nya untuk show and hide :D
    Kenging bensin teu nya? wkwkwkwkw
    Hapus Komentar
    • Hapus Balasan
      2 liter gratis kang :) sambil meraba2 nih kang belajar JS yang simple