Mecha versi 2.6.4 sudah dirilis!

CSS Spoiler

Tabel Konten
  1. HTML 
  2. CSS 
  3. Dengan CSS3 Transisi 

HTML 

<input type="checkbox" class="trigger"/> Buka/Tutup Spoiler
<div class="spoiler">
Konten di sini...
</div>

CSS 

input.trigger {
  display:inline-block;
  margin:0;
  padding:0;
}

.spoiler {
  background-color:white;
  padding:15px 30px;
  margin:10px 0 0;
  display:none;
}

input.trigger:checked + .spoiler,
input.trigger:checked + br + .spoiler {
  display:block;
}

Lihat Demo

Dengan CSS3 Transisi 

input.trigger {
  display:inline-block;
  margin:0;
  padding:0;
}

.spoiler {
  overflow:hidden;
  background-color:white;
  margin:10px 0 0;
  padding:0 30px;
  height:0;
  visibility:hidden;
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -ms-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out;
}

input.trigger:checked + .spoiler,
input.trigger:checked + br + .spoiler {
  padding:15px 30px;
  visibility:visible;
  height:300px;
  overflow:auto;
}

Lihat Demo

26 Komentar

Unknown

pertamaxx kk,,, boleh nyoba ya?? ^_^

MUX SPARROW

Postingan-postingan dari Mas Taufik selalu ane tongkrongin.. \o/ makasih, Mas.. insyaAllah ane pake di blog baru: Muslim Media 0:)

Ai

kalau trigger nya ganti button gimana mas

Taufik Nurrohman

@Lab Tutorial Tambahkan elemen <label>, gunakan sebagai pemicu checkbox. Atur tampilannya agar tampak seperti tombol:

<input type="checkbox" class="trigger" id="spoiler1"/>
<label for="spoiler1">Buka/Tutup</label>
<div class="spoiler">
Konten...
</div>
input.trigger {
display:inline-block;
margin:0px;
padding:0px;
}
.spoiler {
overflow:hidden;
background-color:white;
margin:10px 0px 0px;
padding:0px 30px;
height:0px;
visibility:hidden;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}
input.trigger + label,
input.trigger + br + label {
background-color:green;
color:white;
padding:5px 10px;
cursor:pointer;
position:relative;
left:-0.8em;
}
input.trigger:checked ~ .spoiler {
padding:15px 30px;
visibility:visible;
height:300px;
overflow:auto;
}

Demo: http://jsfiddle.net/tovic/bY6ty/4/

MUX SPARROW

@Taufik Nurrohman tapi Mas.. kok ga jalan ya di blog saya.. apa karena sebelumnya spoiler yang jquery udah tertanam di template?

Taufik Nurrohman

@MUXLIMO Sudah sempat lihat dan tahu masalahnya. Kode di atas sudah diperbaiki.
Masalahnya adalah, saat kita menekan tombol Enter pada editor Blogger, Blogger secara otomatis akan menambahkan tag <br/> seperti ini:

<input type="checkbox" class="trigger"/> Buka/Tutup Spoiler<br/>
<div class="spoiler">
Konten di sini...
</div>

Makannya penargetan selektor input.trigger:checked + .spoiler jadi salah. Cukup perbaharui saja pada bagian ini:

input.trigger:checked + .spoiler,
input.trigger:checked + br + .spoiler {
display:block;
}

Semoga berhasil :)

MUX SPARROW

@Taufik Nurrohman ah..okok... nanti saya coba Mas :) kebetulan saya perlu yang keterangan buka/tutup spoilernya bisa diubah sesuai dengan kebutuhan posting, Mas. Kalau sebelumnya yang bentuk tombol kan terbatas cuman lihat konten ama Tutup aja karena tertanam di kode css ya?!

Makasih sekali lagi, Mas.. semoga ditambah rezeki dunia-akhiratnya. Aamiin. ^_^

Ohim

mengganti

input.trigger:checked + .spoiler,
input.trigger:checked + br + .spoiler {
display:block;
}

gimana suhu?? ada yang di buang atau ditambahkan?
di blog saya juga ga jalan...

Yusril Ibnu Maulana

apakah sistem kerja Toggle PRE? yang dibawah blog ini cara kerjanya sama seperti cara ini ??

Thx Infonya... :-bd :-bd

Surga Kenari

cara buat plugin seperti di blog ini gmn mas taufik..

seperti di atasnya komentar ini dengan background berwarna merah..

cth : Isnan Nugrah Lastiko Tiko menulis komentar/memulai diskusi di Recent comments widget for blogger with

Surga Kenari

loadnya agak lama sudah saya terapkan,,

ketika di klik button checknya, keluarnya butuh waktu 3-4 detik untuk membuaka / menutup spoilernya..

Surga Kenari

cth : http://sdftyujklvbn.blogspot.com/2012/11/ini-dia-5-ponsel-teraneh-dan-terunik-di.html

Taufik Nurrohman

Di Saya malah nggak jalan sama sekali.

Surga Kenari

gmn ya mengatasinya? pdhl dah saya terapkan mas..

Taufik Nurrohman

Coba penulisan kodenya jangan diberi ganti baris. Editor Blogger umumnya akan menambahkan tag <br /> secara otomatis pada bagian ganti baris saat posting telah diterbitkan.
Tulis kerangka spoilernya seperti ini:

<input type="checkbox" class="trigger"/>Buka/Tutup Spoiler<div class="spoiler"> ... </div>

Surga Kenari

yes baru bisa thanks mas Taufik. :D !

Unknown

Mas kalau membuat spoilernya di posting Home gimana ya... terimakasih

budkalon

Ah, menurut saya, bagusnya kalau si trigger nya disembunyikan dengan ini:
input.trigger {
position:absolute;
left:-9999999px;
top:-99999999px;
}

:)

Unknown

mas gimana caranya bikin spoiler yang ke samping, seperti widget daftar isi tabulasi.

Komentar telah ditutup.