Memodifikasi Spoiler Show And Hide

Postingan ini berawal alasannya ialah ada beberapa teman Kompi Ajaib yang menanyakan cara memodifikasi spoiler show and hide yang saya pakai. Dan tentunya Anda sudah tahu dan mengenal apa itu spoiler show and hide kan?

Yup...spoiler show and hide ialah sebuah button yang menyembunyikan konten dan menampilkan konten di dalamnya saat button tersebut diklik. Nah untuk memodifikasinya hanya memerlukan beberapa isyarat CSS sederhana yang saya yakin Anda dapat melakukannya sehingga model buttonnya akan tampak menyerupai yang kita inginkan.

Untuk pola spoiler show and hide yang saya gunakan menyerupai di bawah ini, silahkan klik tombolnya...

Contoh Spoiler Show And Hide

Bagaimana tertarik untuk mencobanya? Sebenarnya isyarat spoiler ini menyerupai isyarat di bawah ini

<div style="text-align: center;">
<div style="margin: 1px;">
<div class="smallfont" style="margin-bottom: 1px;">
<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 = 'Hide Content'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show Content Click Here'; }" style="font-size: 14px; margin: 0px; padding: 0px; width: auto;" type="button" value="Show Content Click Here" /></div>
<div class="alt1">
<div style="display: none;">
<br />
<div style="text-align: center;">

KONTEN DI SINI

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

Nah untuk memodifikasi tampilan button-nya tambahkan isyarat CSS di bawah ini

.smallfont{background:#b0130d;border:1px solid #fff;padding:6px 8px 4px;transition:all 400ms ease-in-out;display:inline-block;box-shadow:1px 1px 5px #c3c3c3}
.smallfont input[type=button]{background:none}
input[type=button]{outline:none;display:inline-block;cursor:pointer;font:bold 12px Georgia;text-decoration:none;text-shadow:1px 1px #000;color:#fff;border:none;border-radius:2px;background:#b0130d;transition:all 400ms ease-in-out}
.smallfont:hover,input[type=button]:hover{background:#E02424}
input[type=button]:active,button:active{position:relative;top:1px;left:1px}

Silahkan rubah warna backgroundnya supaya sesuai dengan tema blog Anda. Selamat mencoba dan semoga bermanfaat...

Sumber https://www.kompiajaib.com/

Share this post