Tuesday, May 22, 2012

CSS Spoiler

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

Labels: ,

26 Comments:

At Tuesday, May 22, 2012 at 1:19:00 PM GMT+7, Blogger Unknown said...

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

 
At Tuesday, May 22, 2012 at 4:02:00 PM GMT+7, Blogger MUX SPARROW said...

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

 
At Tuesday, May 22, 2012 at 6:50:00 PM GMT+7, Blogger Taufik Nurrohman said...

Tinggal dimodifikasi saja tampilannya :)

 
At Wednesday, May 23, 2012 at 6:32:00 PM GMT+7, Blogger Mas Dafri Maulana said...

mas naro CSS ny dimana.?? =p*

 
At Wednesday, May 23, 2012 at 6:43:00 PM GMT+7, Blogger Taufik Nurrohman said...

@Mas Dafri Maulana Di atas ]]></b:skin> atau </style>

 
At Monday, May 28, 2012 at 6:20:00 PM GMT+7, Blogger Ai said...

kalau trigger nya ganti button gimana mas

 
At Monday, May 28, 2012 at 7:17:00 PM GMT+7, Blogger Taufik Nurrohman said...

@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/

 
At Friday, June 1, 2012 at 1:25:00 PM GMT+7, Blogger MUX SPARROW said...

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

 
At Friday, June 1, 2012 at 1:59:00 PM GMT+7, Blogger Taufik Nurrohman said...

@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 :)

 
At Friday, June 1, 2012 at 8:04:00 PM GMT+7, Blogger MUX SPARROW said...

@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. ^_^

 
At Friday, June 8, 2012 at 4:11:00 PM GMT+7, Blogger Mitra kreasi said...

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...

 
At Friday, June 8, 2012 at 5:00:00 PM GMT+7, Blogger Taufik Nurrohman said...

@Ohim Tumaritiz Cuma mengganti selektornya saja. Isinya jangan diapa-apakan. display:block itu cuma contoh.

 
At Wednesday, July 18, 2012 at 8:39:00 PM GMT+7, Blogger Yusril Ibnu Maulana said...

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

Thx Infonya... :-bd :-bd

 
At Wednesday, July 18, 2012 at 9:46:00 PM GMT+7, Blogger Taufik Nurrohman said...

Beda. Kalau yang ini memakai JavaScript.

 
At Tuesday, November 20, 2012 at 6:44:00 AM GMT+7, Blogger Surga Kenari said...

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

 
At Tuesday, November 20, 2012 at 7:24:00 AM GMT+7, Blogger Surga Kenari said...

loadnya agak lama sudah saya terapkan,,

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

 
At Tuesday, November 20, 2012 at 7:25:00 AM GMT+7, Blogger Surga Kenari said...

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

 
At Tuesday, November 20, 2012 at 8:31:00 AM GMT+7, Blogger Taufik Nurrohman said...

Di Saya malah nggak jalan sama sekali.

 
At Tuesday, November 20, 2012 at 10:40:00 AM GMT+7, Blogger Surga Kenari said...

gmn ya mengatasinya? pdhl dah saya terapkan mas..

 
At Tuesday, November 20, 2012 at 12:30:00 PM GMT+7, Blogger Taufik Nurrohman said...

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>

 
At Tuesday, November 20, 2012 at 10:36:00 PM GMT+7, Blogger Surga Kenari said...

yes baru bisa thanks mas Taufik. :D !

 
At Saturday, April 6, 2013 at 5:42:00 AM GMT+7, Blogger Ana Sriwahyuni said...

mas, kalau membuat seperti yang ada di sidebar blog ini bagaimana mas? yang ada di KATEGORI, ENTRI POPULER, ARSIP BLOG, etc. saya ingin seperti mas, tolong kodenya, saya sudah coba bikin sendiri tapi selalu gagal mas,, tolong ya..

 
At Tuesday, April 9, 2013 at 11:39:00 AM GMT+7, Blogger Taufik Nurrohman said...

/2012/02/tip-membuat-sidebar-akordion-pada-blog.html

 
At Saturday, May 11, 2013 at 2:51:00 PM GMT+7, Blogger Unknown said...

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

 
At Tuesday, July 2, 2013 at 5:24:00 PM GMT+7, Blogger budkalon said...

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

:)

 
At Monday, September 30, 2013 at 12:54:00 PM GMT+7, Blogger Unknown said...

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

 

Post a Comment

<< Home