Membuat Kotak Spoiler Keren Dengan CSS (Tanpa Javascript)

Cara Membuat Kotak Spoiler Dengan CSS Tanpa Javascript

Spoiler box adalah sebuah kotak yang berfungsi menyembunyikan konten dan baru dimunculkan ketika user melakukan klik pada tombol. Umumnya spoiler box tampil dengan gaya buka / tutup, sebagian ada yang menyebutnya show / hide. Kebanyakan dibuat menggunakan Javascript atau jQuery karena lebih mudah. Tapi bisa kok membuat spoiler box buka tutup di blog cuma pake CSS aja. Kok mesti pake versi CSS? Ya karena penggunaan Javascript yang minim di blog itu bagus. Bikin loading lebih cepet. Ini sekaligus menjelaskan bahwa event onclick sedehana bisa dilakukan dengan CSS.


1. CSS

Hal utama yang harus dilakukan dalam membuat spoiler box (show / hide) pure CSS ini tentu saja menambahkan kode CSS terlebih dulu. Tambahkan kode berikut DI ATAS ]]></b:skin> atau </style>.

/* 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. HTML

Kode HTML ini berfungsi untuk memanggil kotak spoilernya. Gunakan kode berikut di dalam postingan setiap kali mau menggunakan spoiler.

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

3. Demo / Preview

Hasil akhirnya bakal kaya gini.

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.

Simple kan membuat tombol spoiler box di dalam postingan blog diatas. Saya memang lagi seneng banyak-banyakin pake CSS dibanding Javascript. Kalau ada fungsi Javascript yang bisa digantikan oleh CSS kenapa nggak dicoba. Biar lebih ringan aja blognya.

Artikel Terkait

29 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Mukhlis
    30 November, 2020
    Profil: https://www.blogger.com/profile/05947954403632754312
    keren themenya
  • ㅤ
    24 November, 2020
    Profil: https://www.blogger.com/profile/16776757231040197066
    Mba, request tutorial bikin "Tab" pada postingan dong.

    Seperti pada postingan dokumentasi Fiksioner itu kan ada tab "Indonesian" dan English". :D
  • Muhammad Reza
    08 Mei, 2020
    Profil: https://www.blogger.com/profile/03875569555809687067
    terima kasih mbak, nyari yng ke ginian nemunya disini
  • XMax
    21 Desember, 2019
    Profil: https://www.blogger.com/profile/05978289894201664063
    Mbak igniel... Kalo rada di lebarin dikit gimana yah??
    Contohnya... Buka spoiler
    Dan isi spoilernya terbuka satu pragraff.. walaupun belum klik buka spoiler... Kaya semacam readmore..

    Makasih kak 😊😊
  • Wulandaru Wisesa
    06 Desember, 2019
    Profil: https://www.blogger.com/profile/04730378628659304804
    Kalo tombol buka tutupnya diganti icon bisa gak teh 😁😁😁
  • Wulandaru Wisesa
    06 Desember, 2019
    Profil: https://www.blogger.com/profile/04730378628659304804
    Oh ternyata namanya mbk igniel 😁😁balas ya mbak cakeeep
  • Wulandaru Wisesa
    06 Desember, 2019
    Profil: https://www.blogger.com/profile/04730378628659304804
    Berhasil gan, minta tolong bikinin lagi tutor spoiler begini, cuma bedanya "lihat spoiler" adalah judulnya. Dan ketika kita menekan judul yg kedua, judul yg pertama otomatis tertutup. Plis balas ya agan cakep.
    • Nofree
      19 Desember, 2019
      Profil: https://www.blogger.com/profile/03923321889788334292
      Ane nunggu kyk gini jg. Klo amp ad tu yang acordion. Tp ntah bs g dengan blog non amp
  • Ruanggame
    14 September, 2019
    Profil: https://www.blogger.com/profile/05712850397203942429
    kak izin tulis ulang ya :)
  • Anime Lovers
    10 Agustus, 2019
    Profil: https://www.blogger.com/profile/03404949662626877315
    Kalo Mau Di Buat 2 BAr Gimana
  • Admin
    11 April, 2019
    Profil: https://www.blogger.com/profile/03051075329010761821
    kalo mau di buat 2 gimana biar beda2 nama nya
  • DiffAfford
    07 Maret, 2019
    Profil: https://www.blogger.com/profile/11062439706437447157
    Mbak kalau menu spoilernya kanyak di web-web google dan wikipedia (dropdown) itu digimanainya mbak?
  • Rendi Riawan
    08 Februari, 2019
    Profil: https://www.blogger.com/profile/02094044083916035629
    Thanks banget mbak..
    Ini yang saya cari.. dan thanks juga artikel ini menyelesaikan masalah saya..
  • Ahmad Maryuki
    28 September, 2018
    Profil: https://www.blogger.com/profile/18190146306184501826
    buatin untuk yang banyak spoiler kak, thanks
  • Arif Santoso
    26 Agustus, 2018
    Profil: https://www.blogger.com/profile/03365865900593576473
    Seeeep!



    Btw, request cara membuat daftar isi di dalem artikel donk...
    biar kalo buat artikel panjang visitor ngga perlu ribet scroll up/down
    • Igniel
      06 September, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      As you wish, buddy. Enjoy.
      https://www.igniel.com/2018/08/daftar-isi-table-of-contents.html
    • Masdin
      17 Februari, 2019
      Profil: https://www.blogger.com/profile/16058590950201232857
      Link nya gak bisa di klik mbak'e ,
    • Igniel
      19 Februari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ketik manual aja di browser.
  • mbok dolan
    11 Maret, 2018
    Profil: https://www.blogger.com/profile/00533933211881717688
    Mbak igniel, kalau buat kotak spoiler buka tutupnya di kasih pasword caranya gimana ya?
    • Igniel
      11 Maret, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bisa-bisa aja. Tapi harus pake javascript. Nggak bisa sekedar CSS kaya yang ini.
    • mbok dolan
      12 Maret, 2018
      Profil: https://www.blogger.com/profile/00533933211881717688
      caranya gmn ya mbak kalau pake javascript kasih kode pasword
  • geografi
    08 Maret, 2018
    Profil: https://www.blogger.com/profile/05082881367336329073
    Menggunakan spoiler ini, konten tetap bisa terdeteksi atau terindeks google tdk g ya mbak igniel?
    • Igniel
      09 Maret, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Masih terindex oleh mesin pencari kok.
  • Timon Adiyoso
    06 Maret, 2018
    Profil: https://www.blogger.com/profile/08315363282316702825
    Bisa untuk buka tutup Komentar Disqus juga kah mbk Igniel...
    • Igniel
      06 Maret, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kalo pake ini cuma disembunyiin aja mas.

      Mending pake yang ini, yang pemanggilannya ditunda sebelum klik tombol. Biar blognya ringan https://www.igniel.com/2018/03/load-disqus-onclick-button.html
  • Diandra
    28 Februari, 2018
    Profil: https://www.blogger.com/profile/18212833205406477080
    Menggunakan kode diatas bisa merapikan artikel dengan niche tutorial. makasih mbak n salam kenal
  • Unknown
    25 Februari, 2018
    Profil: https://www.blogger.com/profile/03706931773067521585
    keren mba, tapi kalau misalnya mau copy isi dari sepoiler diatas itu susah. soalnya klik tutup spoilernya bisa diluar tombol. jadi pas mau di copy, isi spoiler akan ketutup duluan.
    • Igniel
      25 Februari, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya mas itu salah satu kekurangannya. Masih menutup kalo diklik dimana aja.
  • Edwin
    24 Februari, 2018
    Profil: https://www.blogger.com/profile/01052716820235258743
    wah makasih banyak kak, kemaren aku sempat urungkan niat pakai yang kaya gini (modal) karena css framework nya ga cocok sama program web saya