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

88 komentar

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

Balas

2 liter gratis kang :) sambil meraba2 nih kang belajar JS yang simple

Balas

kang udah gk update template zikazev lagi toh ?
saya tunggu zikazev-zikazev yang lebih wow dan lebih fresh :D

Balas

Simple tapi manfaatna ageung kang :D nuhun ah.

Balas

hehhe.. belom sempet.. mungkin kapan2

Balas

Simpelendung siga opak nu dibeuleum hehehehe :D

Balas

simpelendung jiga balon kang :D
haturnuhun kang elmuna, wilujeung ngeblog
maaf kang mau nanya tapo OoT, kalo bikin border warna-warni tapi yang lurus gimana ya kang?

Balas

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

Balas

Pami tombolna disimpen di lebet blok warna tiasa teu kang....

Balas

Keren Kang Ismet, tapi kami sangat tertarik dengan Widget 'Rekomendasi Untuk Anda' nya.

Ada tutor nya Kang? Haturnuhun Kang Ismet

Balas

hahhaha.. coba CSSnya kaya gini .stripes{width:100%;height:5px;overflow:hidden;background:#ccc}
.stripe{width:25%;height:4px;float:left}
.item1{background:#00c3b7}
.item2{background:#fc8800}
.item3{background:#80d656}
.item4{background:#ff8168}
htmlnya <div class="stripes">
<span class="stripe item1"></span><span class="stripe item2"></span><span class="stripe item3"></span><span class="stripe item4"></span>
</div>

Balas

kang saya membuat widget follow tweet and like fb, seperti punya kang ismet (Maling) :D tapi setelah saya gunakan, seo blog saya menjadi turun kang, dari 100% menjadi 87%, mungkin karena iframes-nya yang berubah Bad , tapi kok blog kangismet adem-adem aja yah walaupun menggunakan widget tersebut, ada caranya gk kang ismet, agar seo-ku ini tidak turun :)

Balas

wew keren kang :)
ane izin coba terapin :D
#salam damai!

Balas

wach bagus nie kang ismet bisa juga untuk menyembunyikan yang lain juga kang lebih efektif :-d

Balas

Awas jangan buat nyembunyiin selingkuhan mas wkwkwkwkwk

Balas

iya kang tutornnya makasih ngakeng aja :D
makasih udah share kang ismet!
- Blogwalking -

Balas

eh maksudnya ngaceng ^_^
- salam damai -

Balas

kang ismet sekarang blognnya tambah canggih,
ane sahabat jahu kang,dari makassar :D
minta izin nyoba kang! :)
- Blogbaru mau beliin domain .com - <-- maaf :p

Balas

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

Balas

sami kang... mangga dicobian :)

Balas

tiasa kang <div id='hijau'>
kode tombol
</div>

Balas

Ke sini aja mas, udah ada tutornya /2013/09/membuat-slide-box-rekomendasi-di-blogger.html :D

Balas

wah kang adhy.. kade ah wkwkkwkwkwk

Balas

canggih apanya ya? :) beli domainnya di myidwebhost.com aja :-d

Balas

Simple kang, penggunaannya mirip kayak Tab Comment dan Post pada blog Maz Waone ya. :D

Balas

maaf OoT kang, cara upload gambar ukuran besar, misal untuk background full gimana kang?

Balas

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

Balas

Udat - edit ae rudet jadina kang , angger we gobet hasilna teh ( lieurrr kang ) hehe
mending nongkrong didie ah ..sabari ngopi plus molen ... !!

Balas

benul.. emang konsep awalnya pertanyaan masalah itu sob

Balas

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]

Balas

Bagi - bagi atuh kopi sareng molenna, mumpung lagi laper nih haha

Balas

ciaek... ada penampakan hari ini |o| :-bd

Balas

keren kang.. masukan ieu mah, kumaha pami di homepage fontna rada di tuaan deui rada serab :)

Balas

sehari ngilang, bertapa di gunung gede.. eh ketemu wiro sableng wkwkkwkw :D :D

Balas

kade salah nyomot.. aya tikotok :)

Balas

hehehe.. gara2 nyuri :)
pake yang HTML5 dari fbnya jangan pake yang iframe

Balas

tuh udah dibantu jawab oleh om epul :-bd

Balas

mangga kadieu mempeng hanuet keneh yeuh ..
sip kang urang cobi sesuaikan meh te matak eucey soca hehe

Balas

jika twitternya yang iframe ? masalah gk sama SEOnya ?

Balas

apapun jenisnya.. iframe itu ga bagus untuk SEO

Balas

ternyata kalau pandai dalam menggunakan CSS, blog, artikel jadi terlihat lebih bagus dan elegan nih kang ismet

Balas

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, :(

Balas

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>

Balas

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

Balas

btw kang ko gak bisa di kilik 2x kode yg di dalam komentar .. berarti tooltipnya nipu tuh hehe

Balas

Hatur nuhun kang, cekdur wae solusi ti Kang Ismet mah. :-d

Balas

betul.. harus beda id.. untuk style, diedit aja :)

Balas

Mas , cara membuat kotak yang dibawah komentar (Terimakasih telah berkomentar) itu gimana caranya? :)

Balas

bagus banget nih,,,!! Tutorialnya keren bang!

Balas

itu pake background gambar ko

Balas

Kang nyungken bantosan validasi di halaman post ieu kumaha ?
http://saeful13.blogspot.com/2013/09/membuat-widget-parse-html.html

Balas

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' />

Balas

Kang Ismet Memang Masternya Blogger,Infonya Selalu Menambah Motivasi Untuk Terus Belajae Dan belajar Lagi

Balas

masih jauh untuk kelas master, emang dalam hidup ini ga ada berhenti belajar kan? :)

Balas

Nuhun kang, valid ayeuna mah. :D

Balas

Kang pake yang ini Show sama Hide nya keliatan bentrok,tapi kalo udah klik baru ilang.

Balas

kalau punya saya bentrok ga? soalnya saya pake kode yang sama

Balas

wew mantab kang :)
mampir yah ke blog ane :)
- salam damai -

Balas

Bagus deh kang tombolnya :D tampilannya juga tambah keren :D

Balas

Kang.. kalo nerapin ini tuk blok komentar, gimana caranya ya?

Balas

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]

Balas

wkwkwkwk hapunten, Kang.. boloho sayah.. ampuuunnn

Balas

punten kang kalau objeknya gambar dan lebih dari 2 penerapan codenya seperti apa ya ?

Balas

masing2 pake id tertentu, soalnya kalau idnya sama, nanti kebuka semua

Balas

DISTRIBUTOR LENSA CANON Bergaransi
Daftar harga Promo online Lensa Canon datascrip
CANON EF 100-400mm f/4.5-5.6L IS USM Rp.7.150.000,-
CANON EF 100mm f/2 USM Rp.1.900.000,-
CANON EF 100mm f/2.8 Macro USM Rp.2.350.000,-
CANON EF 100mm f/2.8L Macro IS USM Rp.3.700.000,-
CANON EF 135mm f/2.8 SoftFocus Rp.1.900.000,-
CANON EF 135mm f/2L USM Rp.3.750.000,-
CANON EF 14mm f/2.8L II USM Rp.9.500.000,-
CANON EF 15mm f/2.8 Fisheye Rp.4.100.000,-
CANON EF 16-35mm f/2.8L II USM Rp.6.800.000,-
CANON EF 17-40mm f/4L USM Rp.3.300.000,-
CANON EF 180mm f/3.5L Macro USM Rp.6.200.000,-
CANON EF 200mm f/2.8L II USM Rp.3.300.000,-
CANON EF 20mm f/2.8 USM Rp.2.050.000,-
CANON EF 24-105mm f/4L IS USM Rp.4.900.000,-
CANON EF 24-70mm f/2.8L USM Rp.6.100.000,-
CANON EF 24mm f/1.4L II USM Rp.7.400.000,-
CANON EF 24mm f/2.8 Rp.1.550.000,-
CANON EF 28-135mm f/3.5-5.6 IS USM Rp.2.050.000,-
CANON EF 28-300mm f/3.5-5.6L IS USM Rp.11.200.000,-
CANON EF 28mm f/1.8 USM Rp.2.050.000,-
CANON EF 35mm f/2 Rp.1.250.000,-
CANON EF 400mm f/5.6L USM Rp.5.150.000,-
CANON EF 50mm f/1.2L USM Rp.6.800.000,-
CANON EF 50mm f/1.4 USM Rp.1.600.000,-
CANON EF 50mm f/2.5 Compact Macro RP.1.400.000,-
CANON EF 70-200mm f/2.8L IS II USM Rp.9.700.000,-
CANON EF 70-200mm f/2.8L USM Rp.5.550.000,-
CANON EF 70-200mm f/4L IS USM Rp.5.300.000,-
CANON EF 70-200mm f/4L USM Rp.3.250.000,-
Bagi yang serius order sebelum kehabisan,untuk harga promo terbatas
TOKO PLANET DIGITALCANON melayani pengiriman seluruh Indonesia.
Melalui kantor TIKI/JNE.CARA Pesan online
TLP.021-4067-5777
HP.085-228-567-888
PIN BB:2A90DC9D Belanja di toko kami transaksi aman no tipu tipu.
Alamat TOKO ITC CEMPAKA MAS JLN LETJEN SOEPRAPTO NO 28 JAKARTA PUSAT
Promo discond terbatas
DISTRIBUTOR TERPERCAYA.
http://canon-indonesia.jimdo.com/

Balas

Kang sudah saya terapka dan jadi mksh yah
http://stabilou.blogspot.com

Balas

Ngikut gabung ama orang orang kondang
:) keren kang

Balas

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/

Balas

makasih tutorialnya mas, btw minta ijin mas saya nyomot CSS + Javascriptnya buat konversi + emoticon nya :)
matur nuwun
(gagapseo.com)

Balas

Poskan Komentar


×
Chat