Cara Membuat Kotak Spoiler Dengan CSS (Tanpa JavaScript)

Sudah berapa hari ini saya lagi tidak fokus untuk update artikel di karenakan sibuk nya berbagai kegiatan di tempat saya. Dan untuk untuk hari ini mencoba untuk update artikel yang se'simple mungkin biar tidak terlalu lama" berada di layar hp. Dan untuk artikel kali ini saya mau berbagi kepada sobat Cara Membuat Kotak Spoiler Dengan CSS (Tanpa JavaScript). Cara nya cukup gampang dan tidak membutuhkan waktu yang lama untuk kalian baca artikel ini dan mempraktekan nya langsung. Tutorial ini saya dapat kan dari sobat saya yaitu Mba Igniel dengan blog nya yang bernama www.igniel.com.

Sebelum kita lanjut tutorial nya,, saya akan jelaskan apa itu spoiler kali saja sobat ada yang belum tau apa itu spoiler. Spoiler adalah sebuah kotak yang berfungsi untuk menyembunyikan dan membuka konten atau isi yang kita taro di dalam nya.

Biasa nya spoiler box tampil dengan gaya buka/tutup, sebagian banyak yang menyebutnya show/hide. Kebanyakan di buat melalui javascript atau Jquery karena mungkin lebih mudah. Tapi untuk spoiler kali ini yang akan saya bagikan yaitu cukup menggunakan CSS saja, karena bagi saya cukup mudah juga dan kalian bisa merubah bentuk atau warna yang ada di CSS sesuka kalian.

Cara Membuat Kotak Spoiler Dengan CSS (Tanpa JavaScript)

1. Silakan kalian copy code di bawah ini dan letakan di atas code </style> Atau di ]]></b:skin>. Silakan kalian cocokan dimana sekiranya yang work di template kalian masing", karena setiap template berbeda-beda sob.

/* Spoiler Box Pure CSS by IGNIEL.COM */
.ignielSpoiler {
    display:block; margin:10px 0px; border:1px solid #3498db; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.ignielSpoiler .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;
}
.ignielSpoiler .tombol:focus {
    pointer-events:none;
}
.ignielSpoiler .tombol:before {
    content:'Lihat Spoiler'; /* Tulisan untuk membuka tombol */
    display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.ignielSpoiler .tombol:focus::before {
    content:'Tutup Spoiler'; /* Tulisan untuk menutup tombol */
    background:#cc0000; /* Warna tombol ketika spoiler terbuka */
}
.ignielSpoiler .isi {
    background:#e4e4e4; /* Warna background isi spoiler */
    pointer-events:auto; visibility:hidden; opacity:0; height:0px; transition:all .5s ease;
}
.ignielSpoiler .tombol:focus + .isi {
    visibility:visible; opacity:1; height:auto; margin:10px 0px 5px; padding:10px 15px; transition:all .5s ease;
}

2. Lalu untuk code pemanggil nya silakan kalian gunakan code di bawah ini. Dan letakan di setiap kali kalian ingin gunakan di dalam postingan.

<div class="ignielSpoiler">
    <div class="tombol" tabindex="0"></div>
    <div class="isi">
        <!-- Isi Spoiler -->
        Tulis konten yang ingin disembunyikan disini.
    </div>
</div>

3. Selesai. Dan silakan lihat hasil nya. Sebagai contoh liat di bawah ini.



Mungkin itu saja yang bisa saya bagikan pada kesempatan kali ini, semoga artikel ini bisa bermanfaat buat sobat yang sedang mencari Cara Membuat Kotak Spoiler Dengan CSS (Tanpa JavaScript). Selamat mencoba!

Share this post