Cara Membuat Spoiler 2

Posting ini merupakan lanjutan Cara Membuat Spoiler yang sudah ane posting sebelumnya. Cara kedua membuat spoiler hanya akan menampilkan buttonnya saja, tampa tampilan kolom tertutup. Di bawah ini ada beberapa scrip yang bisa nada gunakan.

<div id="spoiler"><div>
<input name="button" 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'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="contoh spoiler polos" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="text-align: justify;">
silahkan masukkan tulisan anda di sini</div>
</div>
<div id="hide">
</div>
</div>

Silahkan ganti contoh spoiler polos dengan judul anda

Masukkan gambar dengan kode seperti ini

Contohnya seperti di bawah ini....

silahkan masukkan tulisan anda di sini

<div id="spoiler"><div>
<input name="button" 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'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="contoh spoiler dengan border" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="background: none repeat scroll 0% 0% rgb(235, 243, 251); border: 1px solid rgb(170, 204, 238); color: black; margin: 0px; padding: 7px;">
<div style="text-align: justify;">
silahkan masukkan tulisan anda di sini</div>
</div>
<div id="hide">
</div>
</div>
</div>

Silahkan ganti contoh spoiler dengan border dengan judul anda
Contohnya sperti di bawah ini

silahkan masukkan tulisan anda di sini

<div id="spoiler"><div>
<input name="button" 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'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 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 alt="blogonol" class="aligncenter" height="300" src="http://i445.photobucket.com/albums/qq171/etnikprogresif/efg-1.jpg" width="300" /></div>
<div id="hide">
</div>
</div>

Silahkan ganti CONTOH SPOILER UNTUK GAMBAR dengan judul anda
Silahkan ganti alamat gambar dengan tulisan merah paling bawah dengan alamat gambar anda
Contohnya seperti di bawah ini

Ok selamat mencoba dan sukses selalu. Baca juga posting lainnya dan semoga bermanfaat.

"keep spirits and do the best"