my future

Browse » home» cara » di » jquery » membuat » pake » spoiler » wordpress » Cara Membuat Spoiler di Wordpress Pake JQuery

---

Cara Membuat Spoiler di Wordpress Pake JQuery

Nemu tutorial dari blog mas M Alwi bab cara bikin spoiler,, kodenya:

<script style="display:none" language="Javascript" type="text/javascript">

  function togglegambar(showHideDiv, switchImgTag) {

  var ele = document.getElementById(showHideDiv);

  var imageEle = document.getElementById(switchImgTag);

  if(ele.style.display == "none") {

  ele.style.display = "block";

  imageEle.innerHTML = <img class="aligncenter" title="Sembunyikan" src="http://i690.photobucket.com/albums/vv270/alwi/minus.png" alt="tanda minus" width="24" height="24" />;

  }

  else {

  ele.style.display = "none";

  imageEle.innerHTML = <img class="aligncenter" title="Tampilkan" src="http://i690.photobucket.com/albums/vv270/alwi/plus.png" alt="tanda plus" width="24" height="24" />;

  }

  }

  </script>
<a id="imageDivLink" href="javascript:togglegambar(contentDivImg, imageDivLink);"><img class="aligncenter" title="Tampilkan" src="http://www.randomsnippets.com/wp-includes/images/plus.png" alt="tanda plus" width="24" height="24" /></a>


<div id="contentDivImg" style="display: none;padding:5px;border:1px solid #666666;width:583px;margin-bottom:15px">Ini contoh membuat tombol spoiler (Show Hide Element) menggunakan gambar (+) dan minus (-)</div>





Model lainnya adalah pake kode ini:

<div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(div)[show].style.display != ) { this.parentNode.parentNode.getElementsByTagName(div)[show].style.display = ; this.parentNode.parentNode.getElementsByTagName(div)[hide].style.display = none; this.innerText = ; this.value = TUTUP; } else { this.parentNode.parentNode.getElementsByTagName(div)[show].style.display = none; this.parentNode.parentNode.getElementsByTagName(div)[hide].style.display = ; this.innerText = ; this.value = LIHAT LAGI; }" name="button" type="button" value="CONTOH SPOILER DENGAN BORDER DAN WARNA BACKGROUND" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">
<p style="text-align: justify;">TULIS KALIMAT YANG AKAN DISEMBUNYIKAN DI SINI.</p>
</div><div id="hide"></div></div></div> 

Bisa JUga INI:
<div id="spoiler"><div>
<input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(div)[show].style.display != ) { this.parentNode.parentNode.getElementsByTagName(div)[show].style.display = ; this.parentNode.parentNode.getElementsByTagName(div)[hide].style.display = none; this.innerText = ; this.value = TUTUP; } else { this.parentNode.parentNode.getElementsByTagName(div)[show].style.display = none; this.parentNode.parentNode.getElementsByTagName(div)[hide].style.display = ; this.innerText = ; this.value = LIHAT LAGI; }" name="button" type="button" value="CONTOH SPOILER UNTUK GAMBAR" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<img class="aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5_1cn5EskBr-gHib5U0fAIT08SqNSo0LXcXWgtMhBaFih6lyZQNfRq-sV4uAHulXtg6mdkooyMROVacXhCZfR4b_WNmR91DCBe-BpQ1DLVwMDyPsjiZ09c7Jr90i-wpyT891p1uUJ6fU/s320/monyet.jpg" alt="monyet" width="300" height="280" />
</div><div id="hide"></div></div></div>