Membuat Spoiler Hide/Show

Hi Sobat Techno..
Kali ini Techno akan coba membuat tutorial tentang bagaimana cara membuat spoiler hide/show.
Ini dipergunakan saat kita memiliki postingan yang lumayan banyak gambarnya terutama.
Nah tutorialnya :

1. Copy kode di bawah ini, kemudian paste di Edit Html sobat Techno.
<div>
<input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Sembunyikan&#39;; } else{ this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tampilkan&#39;; }" type="button" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">
Masukan gambar atau teks disini.
</div>
</div>
</div>

2.  Perhatikan yang berwarna merah, dapat diganti dengan teks yang sobat Techno suka. Kemudian untuk yang berwarna biru dapat diganti sesuai settingan sobat Techno.
3. Selamat mencoba.

Contohnya seperti berikut.

1 comments:

owdeiitow niitaa mengatakan...

mksi infonya..
ditunggu info selanjutnya,,
lanjutkan..
:)

Posting Komentar