Cara Membuat Kotak Spoiler Keren Dengan CSS (Tanpa Javascript)
Spoiler box adalah sebuah kotak yang berfungsi untuk menyembunyikan konten dan bisa dimunculkan ketika pengguna melakukan klik pada kotak tersebut. Pada umumnya, spoiler box tampil dengan gaya buka/tutup, sebagian blogger atau pengguna menyebutnya show/hide. Sebagian ada yang menggunakan Javascript atau jQuery karena lebih mudah. Sebetulnya untuk membuat spoiler box buka tutup di blog bisa menggunakan CSS.
Kenapa kok pakai versi CSS? karena penggunaan Javascript yang minim di blog itu bagus. Penggunaan CSS bisa bikin loading lebih cepat dan sekaligus menjelaskan bahwa event onclick sederhana bisa dilakukan dengan CSS.
1. Spoiler Box dengan CSS
Hal mendasar yang harus dilakukan dalam membuat spoiler box (show/hide) pure CSS ini tentu saja menambahkan kode CSS terlebih dahulu. Coba Anda tambahkan kode berikut DI ATAS ]]></b:skin> atau </style>.
/* Spoiler Box Pure CSS by MASMALVEN.COM */
.MasMalvenSpoiler {
display:block; margin:10px 0px; border:1px solid #3498db; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.MasMalvenSpoiler .tombol {
background:#3498db; /* Warna tombol */
color:#fff; /* Warna tulisan di tombol */
display:inline-block; cursor:pointer; font:normal 600 14px Tahoma,sans-serif; padding:0px; border:none; outline:none; line-height:20px; border-radius:3px; -moz-border-radius:3px;
}
.MasMalvenSpoiler .tombol:focus {
pointer-events:none;
}
.MasMalvenSpoiler .tombol:before {
content:'Lihat Spoiler'; /* Tulisan untuk membuka tombol */
display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.MasMalvenSpoiler .tombol:focus::before {
content:'Tutup Spoiler'; /* Tulisan untuk menutup tombol */
background:#cc0000; /* Warna tombol ketika spoiler terbuka */
}
.MasMalvenSpoiler .isi {
background:#e4e4e4; /* Warna background isi spoiler */
pointer-events:auto; visibility:hidden; opacity:0; height:0px; transition:all .5s ease;
}
.MasMalvenSpoiler .tombol:focus + .isi {
visibility:visible; opacity:1; height:auto; margin:10px 0px 5px; padding:10px 15px; transition:all .5s ease;
}
2. Spoiler Box dengan HTML
Kode HTML ini berfungsi untuk memanggil kotak Spoiler Box. Anda gunakan kode berikut di dalam postingan setiap mau memanggil spoiler.
<div class="MasMalvenSpoiler">
<div class="tombol" tabindex="0"></div>
<div class="isi">
<!-- Isi Spoiler -->
Tulis konten yang ingin disembunyikan disini.
</div>
</div> 3. Demo / Preview
Hasilnya seperti di bawah ini.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.