Cara Membuat Spoiler atau Hide-Show Effect

Diposting oleh Wisnurat 7:03 AM 3 comments

Tutor.OKeguru.Com - Cara Membuat Spoiler atau Hide-Show Effect

Ada banyak tutorial cara membuat efek Show-Hide atai spoiler.
Namun yang paling sederhana utk memahami cara kerja Show-Hide effect yaa dari Blogcentral.Com yang ditulis oleh Greenlava.

Sepeti Show-Hide Effect spolier yang di bahasnya pada judul How to create a spoiler or show-hide effect.

Tampilan Spoilernya seperti ini:
TEKS YANG TAMPIL - Coba klik tombol SHOW/HIDE

Cara memasangakan di blog, cukup Copy dan Paste kode di bawah ini :
Pastikan saat di paste dalam mode HTML.

VISIBLE CONTENT HERE
<div id="spoiler" style="display:none"> 
HIDDEN CONTENT HERE 
</div> 
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button>

Cara Edit

1. Ganti baris 1 untuk mengganti judul spoiler.

2. Ganti baris 3 untuk mengisi konten di dalam spoiler.

3. Judil tombol Show-Hide bisa di edit pada baris 5.

Selamat Mencoba.

Seperti itulah Cara Membuat Spoiler atau Hide-Show Effect. Jangan lupa berbagi informasi. Jika ada penjelasan yang kurang jelas atau salah, silahkan tulis di kolom komentar.

Karena berbagi itu indah, bagikan artikel ini untuk saling berbagi informasi.

Salam inovasi, Salam implementasi.

~☺~