Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.
Beranda
Javascript

Menampilkan dan Menyembunyikan Objek dengan onclick Event

Memahami cara kerja onclick event yang mirip dengan toggle system.
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....
#Javascript

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

87 komentar

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
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. 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
    1. 2 liter gratis kang :) sambil meraba2 nih kang belajar JS yang simple
  2. kang udah gk update template zikazev lagi toh ?
    saya tunggu zikazev-zikazev yang lebih wow dan lebih fresh :D
    1. hehhe.. belom sempet.. mungkin kapan2
  3. simple oge kang :)
    1. muhun.. simpelendung :D
  4. Simple tapi manfaatna ageung kang :D nuhun ah.
    1. sa ageung naon tah? :)
  5. 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
    1. sami kang... mangga dicobian :)
  6. Pami tombolna disimpen di lebet blok warna tiasa teu kang....
    1. tiasa kang <div id='hijau'>
      kode tombol
      </div>
  7. Keren Kang Ismet, tapi kami sangat tertarik dengan Widget 'Rekomendasi Untuk Anda' nya.

    Ada tutor nya Kang? Haturnuhun Kang Ismet
    1. Ke sini aja mas, udah ada tutornya /2013/09/membuat-slide-box-rekomendasi-di-blogger.html :D
  8. wew keren kang :)
    ane izin coba terapin :D
    #salam damai!
    1. silahkan sob
  9. wach bagus nie kang ismet bisa juga untuk menyembunyikan yang lain juga kang lebih efektif :-d
    1. Awas jangan buat nyembunyiin selingkuhan mas wkwkwkwkwk
    2. iya kang tutornnya makasih ngakeng aja :D
      makasih udah share kang ismet!
      - Blogwalking -
  10. 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..???
    1. <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>
  11. mantab kang :D
    1. tks sob :)
  12. Simple kang, penggunaannya mirip kayak Tab Comment dan Post pada blog Maz Waone ya. :D
    1. benul.. emang konsep awalnya pertanyaan masalah itu sob
  13. maaf OoT kang, cara upload gambar ukuran besar, misal untuk background full gimana kang?
    1. 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]
  14. Udat - edit ae rudet jadina kang , angger we gobet hasilna teh ( lieurrr kang ) hehe
    mending nongkrong didie ah ..sabari ngopi plus molen ... !!
    1. Bagi - bagi atuh kopi sareng molenna, mumpung lagi laper nih haha
    2. keren kang.. masukan ieu mah, kumaha pami di homepage fontna rada di tuaan deui rada serab :)
  15. ciaek... ada penampakan hari ini |o| :-bd
    1. sehari ngilang, bertapa di gunung gede.. eh ketemu wiro sableng wkwkkwkw :D :D
  16. ternyata kalau pandai dalam menggunakan CSS, blog, artikel jadi terlihat lebih bagus dan elegan nih kang ismet
    1. lebih tertata rapi aja :)
  17. 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, :(
    1. 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>
  18. 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
    1. betul.. harus beda id.. untuk style, diedit aja :)
  19. Mas , cara membuat kotak yang dibawah komentar (Terimakasih telah berkomentar) itu gimana caranya? :)
    1. itu pake background gambar ko
  20. bagus banget nih,,,!! Tutorialnya keren bang!
  21. Kang nyungken bantosan validasi di halaman post ieu kumaha ?
    http://saeful13.blogspot.com/2013/09/membuat-widget-parse-html.html
    1. 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' />
  22. Kang Ismet Memang Masternya Blogger,Infonya Selalu Menambah Motivasi Untuk Terus Belajae Dan belajar Lagi
    1. masih jauh untuk kelas master, emang dalam hidup ini ga ada berhenti belajar kan? :)
  23. wew mantab kang :)
    mampir yah ke blog ane :)
    - salam damai -
  24. Bagus deh kang tombolnya :D tampilannya juga tambah keren :D
  25. Kang.. kalo nerapin ini tuk blok komentar, gimana caranya ya?
    1. 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]
  26. punten kang kalau objeknya gambar dan lebih dari 2 penerapan codenya seperti apa ya ?
    1. masing2 pake id tertentu, soalnya kalau idnya sama, nanti kebuka semua
  27. Kang sudah saya terapka dan jadi mksh yah
    http://stabilou.blogspot.com
  28. Ngikut gabung ama orang orang kondang
    :) keren kang
  29. 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/
  30. makasih tutorialnya mas, btw minta ijin mas saya nyomot CSS + Javascriptnya buat konversi + emoticon nya :)
    matur nuwun
    (gagapseo.com)
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.