Cara Membuat Button Spoiler Hidden di Blog

Spoiler Hidden merupakan kode HTML yang berguna untuk menutup atau membuka isi dalam spoiler itu, Hal ini berfungsi untuk mengurangi space tempalate. Atau mungkin banyak kegunaannya, yang jelas, spoiler itu seperti ini:

Ini spoiler

Sudah tahukan, maksud dari button spoiler hidden itu?
Adapun cara membuat button spoiler hidden yaitu dengan membuat kode seperti dibawah:

<div id="spoiler">
<div>
<div color="transparent" id="show" style="border-style: solid; border-width: 1px; display: none; margin: 0px; padding: 4px; width: 98%;">
</div>
<div id="spoiler">
<div>
<input 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 = 'Hide Spoiler!';
} else {
this.parentNode.parentNode.getElementsByTagName('div')['show']
.style.display = 'none';
this.parentNode.parentNode.getElementsByTagName('div')['hide']
.style.display = '';
this.innerText = '';
this.value = 'Show Spoiler!'; }" style="font-size: 12; margin: 10px; padding: 0px; width: 200px;" type="button" value="Ini Spoiler silakan klik!" />
<div id="show" style="border-style: solid; border-width: 0px; color: black; display: none; margin: 0px; padding: 4px; width: 98%;">
Ini spoiler</div>
</div>
</div>
</div>
</div>

Catatan

• Untuk yang berwarna merah, merupakan tulisan pada button, silakan sobat atur sesuai keinginan.
• Jika kita melihat kodenya, ada dua pengaturan. Yaitu untuk pengaturan button (yang bawah) dan box spoiler (yang atas)
• Di bawah ini saya sediakan kode spoiler dengan tampilan berbeda, silakan Anda coba ulik.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Fotonya</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
isi spoiler
</div></div></div></div>