Spoiler atau buka tutup konten posting

/* Memposisikan letak tombol (left, center, right)*/

Nah nanti isi kontennya ada disini, silahkan isi sendiri

Script untuk contoh di atas adalah sbb :

<div style="text-align: center;"> /* Memposisikan letak tombol (left, center, right)*/
<input 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 = 'TUTUP COY !'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA ISI'; }" type="button" value="BUKA ISI" class='buttons'/></div>
<div class="konten">
<div style="display: none;" class='isi-spoiler'>Nah nanti isi kontennya ada disini, silahkan isi sendiri</div>
</div>

<style>
/*SPOILER CUSTOM*/
.buttons{background:#555;border-radius:4px;border-radius:2px solid #ddd;box-shadow:0 0 0 1px #555;font:bold 14px Verdana;color:#ddd;padding:4px;
}
.buttons:hover{background:#b00;color:#fff;cursor:pointer;box-shadow:0 0 0 1px #555,0 0 5px #000
}
.konten{width:100%;margin:5px auto 0;
}
.isi-spoiler{width:auto;background:#999;border-radius:5px;border:2px solid #fff;box-shadow:0 0 0 1px #888,inset 0 0 0 1px #888;font:12px Verdana;color:#fff;padding:10px;
}
</style>

Artikel Terkait