Banyak pertanyaan sahabat tentang efek show dan hide pada blog ini, seperti pada Kode Konverter, Emoticon dan Shoutbox. Disini saya tidak akan menjelaskan pada penggunaan di blog saya, melainkan akan mencoba menjelaskan cara kerja efek show, hide dan toggle.show hide

Sebelum menggunakan efek ini tentunya blog sobat harus sudah tertanam framework jQuery seperti ini :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Pemasangan jQuery pada template cukup 1 saja. Apabila ada beberapa versi framework jQuery, maka efek-efek tidak akan berjalan.

Silahkan fahami dulu pengertian dari show, hide dan toggle :
.show() digunakan untuk menampilkan objek yang tersembunyi.
.hide() digunakan untuk menyembunyikan objek.
.toggle() melakukan perintah keduanya. Apabia objek tersembunyi maka akan dimunculkan, dan apabila muncul akan disembunyikan.

Syntax (Penulisan)


$(selektor).show(kecepatan)
$(selektor).hide(kecepatan)
$(selektor).toggle(kecepatan)

Selektor merupakan objek yang dikenai perintah, sedangkan Kecepatan bisa menggunakan Mildetik (contoh 500, 1000) 'normal', 'slow' atau 'fast'.

Contoh syntax terhadap satu id misalkan #kotak :

$('#kotak").toggle('slow')


Contoh Penggunaan .show() dan .hide()

Kerangka HTML

<span class="hilang">Hilang</span>
<span class="muncul">Muncul</span>
<div id="target"></div>

CSS

.muncul, .hilang {
    background:#56af2e;
    color:white;
    text-align:center;
    padding:8px 12px;
    font-family:Tahoma, Verdana;
    font-size:13px;
    border-radius:5px;
    cursor:pointer;
    
}

#target {
  background:#1f57a3;
  height:150px;
  margin-top:15px;
}

Deklarasi jQuery

$(document).ready(function() {
    $('.hilang').click(function() {
        $('#target').hide('fast');
    });
    $('.muncul').click(function() {
        $('#target').show('slow');
    });
});

Demo



Contoh Penggunaan .toggle()

Kerangka HTML

<span class="muncul-hilang">Toggle</span>
<div id="target"></div>

CSS

.muncul-hilang {
    background:#56af2e;
    color:white;
    text-align:center;
    padding:8px 12px;
    font-family:Tahoma, Verdana;
    font-size:13px;
    border-radius:5px;
    cursor:pointer;
    
}

#target {
  background:#1f57a3;
  height:150px;
  margin-top:15px;
}

Deklarasi jQuery

$(document).ready(function() {
    $('.muncul-hilang').click(function() {
        $('#target').toggle(500);
    });
});

Demo



Contoh Lainnya


Contoh pergantian teks dengan Buka dan Tutup :

$('.muncul-hilang').toggle(function() {
    $(this).text('Buka!');
    $('#target').slideUp();
}, function() {
    $(this).text('Tutup!');
    $('#target').slideDown();
});

Demo pergantian teks :

Untuk menambahkan efek lain seperti bounce, blind, shake dll sobat harus memasang plugin jQuery UI.

Sumber : http://www.w3schools.com/jquery/eff_toggle.asp - http://www.dte.web.id/2011/10/jquery-show-hide-dan-toggle.html

151 komentar

Keduaxx :D
ini pernah saya lihat sebelumnya di blog kang ruly baru dah kang ismet :D
saya coba dulu kang,, makasih kang :)

Balas

dipasang di shoutmix keren nih kang :)

Balas

Betul Kang ini juga pernah saya lihay tapi dimana ya....

Balas

saya juga mau nyoba nih ;)

Balas

Betul kang... jika kita mengerti ini maka bisa diimplementasikan pada berbagai elemen blog ya kang...

Balas

ijin cicip-cicip kang...
kayaknya berguna nih, hehe

Balas

Waktu itu saya pernah pasang beberapa Jquery dalam satu blog Kang, tapi bener apa yang Akang bilang ada beberapa yang g jalan, mungkin crash kali ya kang.

Balas

Kalo sayah mah seperti biasa pelajari sajh dulu he...

Balas

ijin untuk mengunyah dulu kang
kalau udh hancur baru ditelan

Balas

Mirip d komentar ane mang :D

Balas

saya dulu pernah memakai hal ini tapi sekarang blog-nya udah mati gak tau kemana.

oh ya kang,, blog sebelah templatenya 11-12 dengan template blog kang ismet. itu gimana kang? memang sudah di share atau di cloning?

Balas

Nah ini yg saya butuhkan untuk belajar ... maklum kang ari nu kolot mah sok rampang rempeng

Balas

Assalamu'alaikum kang..,
kenapa tombol konversi sama tombol smiley di blog ini gak berfungsi selepas tombol batal komentarnya diklik... masih dalam pembaikan ya kang?

Balas

sedikit rumit ya kang, tapi ini harus dipelajari dan pahami cara kerjanya, tentu dengan adanya bantuan jquery pasti segalanya makin ok heheh :)

Balas

seraaaaaang kang ... http://ahmadsuyadi.blogspot.com/2013/12/download-template-thesis-responsive-blogger-v2.html?showComment=1388926202024#c1818135754013880773

Balas

agan agan nama template ini apa ya .... ?

Balas

wajib ujicoba kalau pengen bisa main jQuery, ujicoba pake HTML Editor kang Beben hehehe

Balas

namanya .. blog.kangismet.net

Balas

apalagi kalau ditambah efek toggle kaya blind, slide, shake, bounce dll bakal lebih muantabzz

Balas

wajib dicoba kang ,, belajar jquery...

Balas

saya coba pelajari dl :-d

Balas

mantep nih tutorialnya, butuh belajar banyak tentang jquery :-bd

Balas

gan, boleh minta templat blog ini gak? Free? Please!!

Balas

siapa sih yang mau baju yg sedang dipake dipinta sama halnya sama template ini. Template ini merupakan identitas blog ini :D

Balas

saya sudah ikutan gan, gak tau malu ya tuh orang (ahmad suyadi), hehe

Balas

iya sis.. kode ini yang saya pasang

Balas

yang pasti di w3school dan dte :D

Balas

izin bookmark dulu kang, nanti-nanti deh dipelajari :D

Balas

anda juga clone template fastest magz preimum dan anda juga share gratis uh template

Balas

intinya gitu kang... ini sebagai sumber belajar sekaligus catatan saya :D

Balas

kang..kok template yg bisa di cloning sama ahmad suyadi ...bahaya dong ,kunjungan dari malaysia.....

Balas

emang kadang2 ada aja yang crash

Balas

update ah.. tong ngurus jQuery wae :D

Balas

yang clonning anak kecil... belom tau blogging sebenarnya.. kasian sebetulnya dia sudah siap mundur dan bukan maju

Balas

wkwkwk.. ngora keneh ah :D

Balas

annak kecil yang baru melek kang.. hajar lah

Balas

kalau saya enakan di JSFiddle kang

Balas

1juta juga ga saya jual :ngakak:

Balas

ya itulah sifat manusia..

Balas

pd umumnya clone itu seperti apa sih kang?? mencopas mentah2 template berikut script tanpa dimodifikasi atw seperti apa? bagaimana klo kita meng_inspect element trus mengcopy beberapa script namun dimodifikasi kembali dlm hal ini menyesuaikan warna, tata letak serta ukuran dan betuk menyesuaikan blog kita, apa hal tsb bs dinyatakan cloning "tanpa izin jg"?

Balas

Pengertian clone sendiri adalah : Cloning is the creation of an organism that is an exact genetic copy of another. This means that every single bit of DNA is the same between the two!

Artinya sama persis.. dalam kasus seperti itu, boleh untuk dipelajari atau diterapkan dengan tidak mengakui hak cipta

Balas

Jadi ga konsen baca2 nya gara2 topik hot clone,semoga cepat selesai kang

Balas

wkwkwk.... anggap aja nyamuk lah :D

Balas

Terima Kasih Kang Atas Code Seperti jQuery, Css, Dll. :)

Premium Buat Kang Ismet And Keep Smaell :P

Balas

menurut saya bs jg diartikan sebuah kemiripan yg sgt identik shg susah utk dibedakan. Mengakui hak cipta mungkin nggak lah, aktivitas blogging jelas karna terinspirasi dri bnyk hal tetapi bukan dgn cara mencuri. maaf klo komen saya menyimpang dri topik.

Balas

Point # Harus mengerti terlebih dahulu sebelum menerapkanya. Terimakasih sharingnya kang. Salam sukses

Balas

Puyeng nih liat kode-kode itu :D

Balas

di pupus kang postingan na .. bikin surat terbuka kang tuman mangkeluk kitu mah !!!

Balas

Jadi penasaran baca komen sahabat-sahabat disini tentang template kang ismet, coba tengok emang persis sekali yah...
Bisa-bisa nanti kedepannya templatenya malahan bisa dikomersialkan tanpa hak cipta pemiliknya nih Kang...
Haduhhhh...aya-aya wae...(maaf ndak bisa bahasa sunda)...

Balas

makasih sob... saya tidak memeperhatikan sampai disana... nanti saya cari tau masalahnya

Balas

sama2 sob.. silahkan dipelajari

Balas

minum obat aja kalau puyeng :D

Balas

hehehe belajar bhs sunda ya.. saya liat dulu pperkembangannya sob, nantinya baru ambil langkah

Balas

Postingan jadi menarik dan loading juga tidak terganggu!

Balas

oh ternyata cuma anak kecil, eh kang jangan nyinggung mana blogging napa, saya juga tidak mengerti blogging sebenarnya itu gimana, hahaha peace...

Balas

waduh.. ada kasus baru lagi ya, memang manusia yang tidak punya etika dan tidak punya kreaktif tersendiri. pintarnya hanya tiru hasil kerja orang. buat apa harus cloning kalau nantinya semua komentar di blognya dibanjiri dengan gujingan, kalau mau cloning rasanya saya juga pintar, nanun lebih baik kita modif sendiri dengan segala aspek ijimasi kita, bw jquery diatas cukup mungit ya kang :)

Balas

akbar krishnawan@

jika template ini tidak di share maka anda tidak perlu meminta lagi, lagian kang ismet 1jt tidak jual, mungkin kalau anda tawar 10jt mangkin kang ismet jual lho :ngakak:

Balas

nah.. kalau nominalnya segitu.. saya pikir2 dulu :D

Balas

ya begitulah sob.. udah males sebetulnya saya ngomongin clonner ini.. yang pasti kekanakan dan pecundang :D

Balas

wah.. ada master yang manpir nih.. benar kata mas taufik, tidak beretika, buat blognya super wusss ya mas taufik :)

Balas

wich.....
ni fungsinya hampir sama seperti spoiler ya kang ?


tpi lebih keren ...bagus"

Balas

di clone? ku budak belasan tahun? saha tah!!!

Balas

wah keren kang :) ... Kang Ismet emang OK !!

Balas

kata orang bijak sih cinta tidak harus memiliki,suka tapi tidak harus sama...saya yakin orang yang cloning template kang ismet ini orangnya penggemar kang ismet ...sampai sampai templatenya pun harus sama.... orang kaya gini biasanya yang paling suka reposting /share ulang..dan biasanya mereka suka minta izin kaya gini ...Izin repost ya kang..? tapi biasanya jarang /tidak pernah pasang link sumber artikel .... ohya kang artikel tentang Jquery show/hide di atas sangat jelas dan yakin mudah di mengerti ...oleh semua orang

Balas

Wah dwi pertamax mulu ya hehe :)
Izin mencoba triknya akang ismet anu pinter :D

Balas

ini juga berfungsi seperti tombol yg ada dikotak pesan komentar.. keren bang

Balas

wkwkwk baru 2x pertamax di blog mastah ini :)

Balas

smile ngakak :ngakak:
beda dari icon smile yang lain. ckckckckck

Balas

:ngaka :ngaka :ngaka bener bener bener kang....

Balas

wkwkwkwwkw macet kang ngakakna :ngaka

Balas

heuheu.. kurang space kang :ngakak: :ngakak: :ngakak:

Balas

kang ismet,, aku fungsiin jadi show hide .. gimana ya kang kalo sblm di click toglenya isinya belum muncul gimana tuh kang mohon pencerahannya kang . baru belajar ni kang ... :)

Balas

objeknya dikasih display:none contoh css di atas

#target {
....
....
....
display:none;
}

Balas

saya juga ikut mempelajari kang |o|

Balas

nonton YKS juga kang ismet ^_^

Balas

Mantap ini kang, izin coba dan pelajari :D |o|

Balas

Kang Font Judul Artikelna naon nyah ?, hayang euuy :D

Balas

Kang Maaf Sebelumnya saya naro link, Blog bocah itu memang tukang clone, template saya jug di clone habis-habisan, ini template saya fajriandaviar.blogspot dan ini hasil clone dia mas-yadi.blogspot , parah euy eta budak :D

Balas

template ente mirip sm dte ya, heheheee gila jg tu bocah

Balas

Kasian kang, anak orang, tar nangis :( :D =D :ngaka
Ada kemauan dia bisa ngulik sendiri... :-bd
Tapi, harus tau diri aturan dunia maya dong !!

Balas

lapor kang, itu anak masih nekat ngomongnya udah diganti tapi buktinya masih dipake. :(
Kasih surat cinta kang kayak yang dulu hehe

Balas

haha bnr. kasih surat cinta aj om bombay
parah ntu bocah.. nekad sekali.

Balas
Komentar ini telah dihapus oleh pengarang.

murid kang beben sigana tah :D

Balas

nah itulah sob.. harus tau etika

Balas

saya mau request kang .. bikin dong artikel surat terbuka untuk dia hahahaha

Balas

Kayaknya pemilik blog tersebut nggak hiraukan ya soalnya komentar teman-teman Kang Ismet di blognya sudah nggak ada lagi termasuk komentar Kang Ismet

Balas

Waduhh... harus keluar jalur juga nih....
Memang kalau lihat tindakannya cukup kasihan juga kang, dia tukang copas artikel, tukang clone blog, bahkan template premium mas Sugeng diclone juga dan dibagiin jadi gratis... Sayang bakatnya bagus tapi salah jalannya... :(

Balas

wahahhaha, mantap tuh kang clone nya, mirip banget, bakat yang luar biasa di jalan yang gak beretika.., hhaha..

Balas

pake template dte ya gan, mantap mantap nih editor template sekarang :D

Balas
Komentar ini telah dihapus oleh pengarang.

hahahha... biarin aja duu kang.. saya ga mau pusing ngurusin bocah geblek :ngakak:

Balas

berilah petujuk ke jalan yang lurus :D lieur kang lah

Balas

Mas ? Maaf Saya Mau Nanya Nih Mas

Balas

bukannya bisa gunakan jquerry no conflict ?

Balas

tapi template cloningnya responsive nya hancur, mengapa sih cloning? bukankah lebih baik meniru aja ? meniru berbeda dengan cloning, meniru pasti sedikit berubah karena imajinasi dan kratifitas setiap orang berbeda, ini yang harus ditiru, lha cloning ? dah sama, semua sama, ga ada kreatifitas, kapan majunya ?

Balas

Kang Ismet yang baik hati, jikalau ada waktu tolong bahas artikel tentang blog zombie manfaat dan kekurangannya. terima kasih.

Balas

saya malah belum pernah :ngakak:

Balas

saya sih tadinya lihat lihat blog orang tapi ada yg aneh ama template (http://*hm*dsu*ad*.blogspot.com) mirip banget ama template kang ismet yg skarang apakah oarang itu yg clone templatenya,, mungkin kangsimet sudah tahu terlebih dahulu tentang ini maaf OOT dari Post

Balas

keren bang postingannya :) ilmunya berguna banget buat kita-kita yang disini :)

Kujungan Rutin dari Andrekocak Blog

Balas

Di kompi ajaib toggle, di dieu show & hide...asa aya ku janjian mosting teh!!!
Murid aing ternyata euy!!!! preeeeetttt

Balas

makin jaya saja KANG |o|
:ngakak: gak bisa ketiru nih....
pusing nih kepala mikirin nih semua script :P

Balas

bookmark dlu ahh.. udah final langsung d pelajarin kang (y)
-Blogwalking Daeng SEO-

Balas

Mantep Kang Izin Bookmark dlu,, ditunggu tutorial selanjutnya

- Blogwalking Ballxcode -

Balas

kang ko yang clonning didiemin aja? empet ane ngeliatnya, dasar bocah tol*l tuh yang clone

Balas

:P sabarrrrrrrr mass sabar....
seperti pepatah mengatakan "patah lah sebelum orang lain mematahkanmu " @@,
:ngakak: hahahhaa JUST KIDDING mas brooo |o|

Balas

oke sob... makasih kunjungannya

Balas

bener ful sae, jsfiddle mah online, urg aya tuh nu jiga jsfiddle offline...

Balas

si ahmad dah minta maaf tuh : http://ahmadsuyadi.blogspot.com/2014/01/admin-ahmad-suyadi-minta-maaf-kepada.html

Balas

silahkan cek sendiri orangnya kang: https://www.facebook.com/ahmad.suyadi04/posts/383348091811687

Balas

Kang, mohon bantuannya dong..hiks
saya kan mengikuti tutorial yg ada disini:

http://polytimenerd.blogspot.com/2012/06/multilanguage-posts-in-your-blog.html?m=1

krn content blog saya campur..nah setelah saya coba di thedini.blogspot.com,

sdh berhasil namun si post title tetep masih ada kl saya coba klik salah satu bahasa.

mohon pencerahannya ya kang..sy nanya dsini krn sepertinya kok pk toggle menu ini.

skali lg trma kasih ya kang..

Balas
Komentar ini telah dihapus oleh pengarang.

:ngakak: hahahahaaaa
kang sakit ama perut q baca comment yang ini |o|
:P serius dahhhh
hahahah :ngakak:

Balas

kang, kalo misalnya kita ingin menerapkannya pada kotak komentar di blog, tapi ketika halaman sudah selesai dimuat, form komentarnya otomatis tertutup. jadi untuk bisa melihat komentar dan membuat komentar pengunjung harus mengklik tombol "tampilkan komentar" dulu.

fungsi toggle gitu kang, tapi pas loading selesai otomatis hide... diklik dulu baru show.... maaf kalo ribet, masih newbie

:D

Balas

gan ...penempatan deklarasi jquery-nya dimana ?

Balas

jadi lebih keren kang :D

Balas

yang saya cari cari ternyata disini :D

Balas

Thanks Kang Tutor Nya Sangat Bermanfaat ^_^

Balas

semuanya memang ada disini..
thanks kang

Balas

kang sidebar left nya keren.
cara bikin kaya gitu gimana ya kang?
saya tidak berani pake view source code untuk mengcopy hasil kerja orang.
Tapi saya akan menunggu sampai di share oleh pembuatnya.

Balas

makasih banget kang infonya .....?

Balas

bener-bener dalam blog ini saya banyak mendapatkan ilmu pemrograman yg belum di ajarkan oleh guru saya.

Balas

wah makasih kang ismet..
tapi saya masih rada-rada bingung sih..
hahaha

Balas

mau tanya nie ?
kalo target disembunyikan dulu bagaimana caranya ?

itukan di perlihatkan dahulu?

ditunggu balasannya ?!

Balas

tinggal tambahin display:none ajah di id targetnya ..

ex.
#target{background:#1f57a3;height:150px;margin-top:15px;display:none;}

CMIIW =D

Balas

Lihat contoh di blog lain, ternyata di sini ada penjelasan cara membuatnya... ijin belajar kang...

Balas

mau tanya ni kang, bisa gak jquery pada bootstrap di terapin di blog?

Balas

Poskan Komentar


×
Chat