ads
Home » » Cara Membuat Spoiler Show/Hide dengan jQuery

Cara Membuat Spoiler Show/Hide dengan jQuery

Written By Ramadhan Fnw on Sep 4, 2012 | 7:32 PM

Assalamu'alaikum,, sedikit post nih pada malam ini. :) Cuma mau share Cara Membuat Spoiler Show/Hide dengan jQuery. :)
Mungkin sudah banyak sih yang pada tau, tapi karna ada yang request jadi gak papa deh ^_^ :D

Yuk langsung saja,, nih liat demonya dulu. :)



Tampilkan

Gimana, bagus gak? :)

Mudah aja buatnya,, tinggal masukin kode ini di tempat yang kalian ingin kasih spoiler.. :)
NB: Ganti seperlunya ( bisa di edit" juga ) :)




<script language="javascript">
function togglebukatutup() {
var ele = document.getElementById("tutup");
var text = document.getElementById("buka");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Tampilkan";
}
else {
ele.style.display = "block";
text.innerHTML = "Sembunyikan";
}
}
</script>


<center>
<a href="javascript:togglebukatutup();" id="buka" rel="nofollow" style="-moz-border-radius: 6px; -moz-box-shadow: inset 0px 1px 0px 0px #bbdaf7; -webkit-border-radius: 6px; -webkit-box-shadow: inset 0px 1px 0px 0px #bbdaf7; background-color: #79bbff; background: -moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); border-radius: 6px; border: 1px solid #84bbf3; box-shadow: inset 0px 1px 0px 0px #bbdaf7; color: white; display: inline-block; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); font-family: arial; font-size: 15px; font-weight: bold; padding: 6px 100px; text-decoration: none; text-shadow: 1px 1px 0px #528ecc;">Tampilkan</a></center>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div id="tutup" style="display: none; margin-bottom: 15px; padding: 5px;">
Contoh Spoiler Hide/Show dengan jQuery\ bisa di isi dengan gambar atau yang lainnya :)</div>
</div>

Selamat mencoba :)


referensi: http://m-alwi.com/membuat-show-hide-element-dengan-jquery.html 

5
Share this article :

3 komentar:

rental mobil disurabaya said...

terima kasih.. telah berbagi ilmu.. :D

tour and travel surabaya said...

sukses terus buat blognya.. DITUNGGU POSTINGAN BERMANFAAT SELANJUTNYA..

Downspro said...

gimana caranya....supaya 2 sekaligus berisi tulisan tampilan di sampingnya

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Share Our Knowledge - All Rights Reserved
Template Modify by Creating Website Inspired Wordpress Hack
Proudly powered by Blogger