Cara Membuat Tombol Spoiler/Hide Show

Cara Membuat Tombol Spoiler/Hide Show - Apa itu tombol spoiler? Saya juga tidak mengerti definisinya, tapi saya mengerti maksudnya apa (maklum, saya juga otodidak, hehehe). Yang saya pahami, tombol spoiler itu berfungsi untuk menyembunyikan sebuah tulisan atau apa saja yang akan disembunyikan, termasuk scipt html. Jika tombol tersebut diklik, maka akan muncul semua tulisan atau fitur lain yang disembunyikan.

Sebagai contoh, coba klik tombol di bawah ini:

Silahkan diisi apa saja di sini, yang memang dirasa perlu tuk disingkat

Nah, kalau sudah tau, sekarang kita melangkah pada tahap pembuatannya. Silahkan Copy kode di bawah ini kemudian pastekan pada postingan atau gadget di mana kita akan menggunakannya/menampilkannya.

<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Tampilkan" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"/>
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">

Silahkan diisi apa saja di sini, yang memang dirasa perlu tuk disingkat

</div></div></div></div>

Keterangan:

Warna merah dan biru silahkan diganti dengan kata yang di inginkan. Misalnya "show" untuk mengganti kata "tampilkan" dan "Hidden" untuk mengganti kata "Sembunyikan"

Warna Kuning silhkan diganti dengan kalimat atau script/kode atau foto yang akan kita sembunyikan.