Nah, dalam posting kali ini aku akan membahas perihal bagaimana cara menciptakan sebuah spoiler sederhana memakai CSS dan JavaScript. Disini kita memakai atribut onclick untuk memunculkan dan menyembunyikan suatu objek serta mengubah teks sesuai fungsinya, buka-tutup. Oke itu dia, sebagai pola kau dapat lihat demo di sini, pertama silahkan pasang instruksi HTML berikut yang sudah dilengkapi dengan onclick event ialah instruksi j4vascript yang bekerja saat objek di klik.
<div id="show" onclick="document.getElementById('show').style.display='none';document.getElementById('hide').style.display='block';document.getElementById('konten').style.display='block'">Buka</div> <div style="display:none" id="hide" onclick="document.getElementById('hide').style.display='none';document.getElementById('show').style.display='block';document.getElementById('konten').style.display='none'">Tutup</div> <div style="display:none" id="konten">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. </div>Setelah memasang instruksi diatas, saat teks buka di klik maka akan muncul beberapa teks di bawahnya dan goresan pena "buka" menjelma "tutup" dan saat di klik lagi teks di bawahnya menghilang dan tulisannya berubah jadi "buka" kembali. Selanjutnya sahabat dapat menambahkan instruksi CSS berikut untuk mempercantik tampilannya.
#hide,#konten{display:none} #hide,#show{padding:5px;background:#333;width:50px;text-align:center;color:white;cursor:pointer} #konten{margin:10px auto} body{font-family:'Open Sans',arial}Mungkin cukup sekian dari saya, bila ada saran, kritik ataupun pertanyaan silahkan sampaikan pada kotak komentar dibawah atau dapat juga melalui halaman contact blog ini yang dapat dibuka melalui sajian blog dibagian paling atas. Terima kasih dan hingga jumpa! Sumber http://www.maringngerrang.com/
Buat lebih berguna, kongsi: