Menampilkan dan Menyembunyikan Objek dengan onclick Event
Kang Ismet
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><a href="javascript:void(0)" onclick="document.getElementById('hijau').style.display='none';document.getElementById('merah').style.display='block'">Sembunyikan Hijau</a>document.getElementById('nama-id').style.display='pihan-tampilan'Spoiler : Show
Spoiler : Hide
Silahkan sobat berkreasi dengan kreasi sobat. Semoga bermanfaat....
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
2 liter gratis kang :) sambil meraba2 nih kang belajar JS yang simple
kang udah gk update template zikazev lagi toh ?
saya tunggu zikazev-zikazev yang lebih wow dan lebih fresh :D
hehhe.. belom sempet.. mungkin kapan2
Simple tapi manfaatna ageung kang :D nuhun ah.
sa ageung naon tah? :)
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
sami kang... mangga dicobian :)
Pami tombolna disimpen di lebet blok warna tiasa teu kang....
tiasa kang <div id='hijau'>
kode tombol
</div>
Keren Kang Ismet, tapi kami sangat tertarik dengan Widget 'Rekomendasi Untuk Anda' nya.
Ada tutor nya Kang? Haturnuhun Kang Ismet
Ke sini aja mas, udah ada tutornya /2013/09/membuat-slide-box-rekomendasi-di-blogger.html :D
wew keren kang :)
ane izin coba terapin :D
#salam damai!
silahkan sob
wach bagus nie kang ismet bisa juga untuk menyembunyikan yang lain juga kang lebih efektif :-d
Awas jangan buat nyembunyiin selingkuhan mas wkwkwkwkwk
iya kang tutornnya makasih ngakeng aja :D
makasih udah share kang ismet!
- Blogwalking -
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..???
<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>
mantab kang :D
tks sob :)
Simple kang, penggunaannya mirip kayak Tab Comment dan Post pada blog Maz Waone ya. :D
benul.. emang konsep awalnya pertanyaan masalah itu sob
maaf OoT kang, cara upload gambar ukuran besar, misal untuk background full gimana kang?
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]
Udat - edit ae rudet jadina kang , angger we gobet hasilna teh ( lieurrr kang ) hehe
mending nongkrong didie ah ..sabari ngopi plus molen ... !!
Bagi - bagi atuh kopi sareng molenna, mumpung lagi laper nih haha
keren kang.. masukan ieu mah, kumaha pami di homepage fontna rada di tuaan deui rada serab :)
ciaek... ada penampakan hari ini |o| :-bd
sehari ngilang, bertapa di gunung gede.. eh ketemu wiro sableng wkwkkwkw :D :D
ternyata kalau pandai dalam menggunakan CSS, blog, artikel jadi terlihat lebih bagus dan elegan nih kang ismet
lebih tertata rapi aja :)
Kang,menambahkan tag kondisional pada halaman error dibwah ini gimna ya ?
<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, :(
pabeulit nya :) <b:if cond='data:blog.pageType == "index"'>
<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>
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
betul.. harus beda id.. untuk style, diedit aja :)
Mas , cara membuat kotak yang dibawah komentar (Terimakasih telah berkomentar) itu gimana caranya? :)
itu pake background gambar ko
bagus banget nih,,,!! Tutorialnya keren bang!
Kang nyungken bantosan validasi di halaman post ieu kumaha ?
http://saeful13.blogspot.com/2013/09/membuat-widget-parse-html.html
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' />
Kang Ismet Memang Masternya Blogger,Infonya Selalu Menambah Motivasi Untuk Terus Belajae Dan belajar Lagi
masih jauh untuk kelas master, emang dalam hidup ini ga ada berhenti belajar kan? :)
wew mantab kang :)
mampir yah ke blog ane :)
- salam damai -
Bagus deh kang tombolnya :D tampilannya juga tambah keren :D
Kang.. kalo nerapin ini tuk blok komentar, gimana caranya ya?
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]
punten kang kalau objeknya gambar dan lebih dari 2 penerapan codenya seperti apa ya ?
masing2 pake id tertentu, soalnya kalau idnya sama, nanti kebuka semua
Komentar ini telah dihapus oleh Unknown sebagai penulis.
Kang sudah saya terapka dan jadi mksh yah
http://stabilou.blogspot.com
Ngikut gabung ama orang orang kondang
:) keren kang
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/