Tuesday, January 12, 2016

Cara Membuat Spoiler CSS Sederhana

Cara Membuat Spoiler CSS Sederhana

Assalamu'alaikum warohmatullahi wabarokatuh. Nah, dalam posting kali ini saya akan membahas tentang bagaimana cara membuat sebuah spoiler sederhana menggunakan CSS dan JavaScript. Disini kita menggunakan atribut onclick untuk memunculkan dan menyembunyikan suatu objek serta mengubah teks sesuai fungsinya, buka-tutup. Oke langsung saja, pertama silahkan pasang kode HTML berikut yang sudah dilengkapi dengan onclick event yaitu kode javascript yang bekerja ketika 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 kode diatas, ketika teks buka di klik maka akan muncul beberapa teks di bawahnya dan tulisan "buka" berubah menjadi "tutup" dan ketika di klik lagi teks di bawahnya menghilang dan tulisannya berubah jadi "buka" kembali. Selanjutnya sobat bisa menambahkan kode 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, kalau ada saran, kritik ataupun pertanyaan silahkan sampaikan pada kotak komentar dibawah atau bisa juga melalui halaman contact blog ini yang bisa dibuka melalui menu blog dibagian paling atas. Terima kasih, assalamu'alaikum.
Disqus Comment
Parse Tool