Membuat Show Hide Div Sederhana Di Postingan

Selain isi konten yang original dan menarik dikala menciptakan sebuah postingan, tentunya akan lebih baik lagi kalau tampilan postingannya lebih aktraktif sehingga akan lebih menarik pengunjung untuk membacanya. 

Salah satu hal yang dapat kita buat di dalam postingan adalah tombol show and hide. Kita dapat menyembunyikan teks atau gambar dengan ini, kemudian pengunjung dapat melihat gambar atau teks yang kita sembunyikan dengan meng-klik tombolnya.

Banyak jenis show hide div ini, dan di sini aku akan share cara menciptakan salah satunya adalah show hide div yang sederhana di postingan ibarat yang dapat Anda lihat pada gambar gif di bawah ini.

DEMO ON JSFIDDLE

Bagi yang mau mencobanya silahkan gunakan arahan HTML di bawah ini, silahkan gunakan pada post editor HTML.

 <div id="Button" style="margin:0 auto;text-align:center">
 <input type="button" onclick="document.getElementById('Content').style.display='block';Button.style.display='none';" value="Get The Code Here" />
 </div>
 <div id="Content" style="display:none;width:300px;padding:10px;margin:0 auto;border:1px solid #aaa;text-align:center;box-shadow: 0px 1px 3px 0px rgba(179,179,179,1);background:#fff">
 <p>
 SILAHKAN SIMPAN TEKS ATAU GAMBAR DI SINI
 </p>
 <input type="button" onclick="document.getElementById('Content').style.display='none';Button.style.display='block';" value="&#10006;" />
 </div>
 

Cukup sederhana bukan? Silahkan ganti arahan Get The Code Here dengan apa saja yang Anda mau. Dan silahkan ganti SILAHKAN SIMPAN TEKS ATAU GAMBAR DI SINI dengan teks atau gambar yang ingin Anda sembunyikan.

Dan perhatikan lebar Content pada arahan ini width:300px dapat Anda ganti angkanya sesuai harapan Anda ibarat di bawah ini.

Jika kita kreatif, ini juga dapat kita jadikan trik untuk menciptakan ucapan terima kasih sehabis klik tombol download ibarat pada postingan aku yang lalu.

Baca juga: Ucapan Terima Kasih Setelah Klik Tombol Download

Sumber https://www.kompiajaib.com/

Share this post