Mungkin sudah banyak sih yang pada tau, tapi karna ada yang request jadi gak papa deh ^_^ :D
Yuk langsung saja,, nih liat demonya dulu. :)
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
3 komentar:
terima kasih.. telah berbagi ilmu.. :D
sukses terus buat blognya.. DITUNGGU POSTINGAN BERMANFAAT SELANJUTNYA..
gimana caranya....supaya 2 sekaligus berisi tulisan tampilan di sampingnya
Post a Comment