Cara Membuat Spoiler CSS Sederhana

Cara Membuat Spoiler CSS Sederhana

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 itu dia, sebagai contoh kamu bisa lihat demo di sini, 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 dan sampai jumpa!

Related Posts

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel