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: CSS, Potongan
26 Comments:
pertamaxx kk,,, boleh nyoba ya?? ^_^
By Unknown, at Tuesday, May 22, 2012 at 1:19:00 PM GMT+7
Postingan-postingan dari Mas Taufik selalu ane tongkrongin.. \o/ makasih, Mas.. insyaAllah ane pake di blog baru: Muslim Media 0:)
By MUX SPARROW, at Tuesday, May 22, 2012 at 4:02:00 PM GMT+7
Tinggal dimodifikasi saja tampilannya :)
By Taufik Nurrohman, at Tuesday, May 22, 2012 at 6:50:00 PM GMT+7
mas naro CSS ny dimana.?? =p*
By Mas Dafri Maulana, at Wednesday, May 23, 2012 at 6:32:00 PM GMT+7
@Mas Dafri Maulana Di atas ]]></b:skin> atau </style>
By Taufik Nurrohman, at Wednesday, May 23, 2012 at 6:43:00 PM GMT+7
kalau trigger nya ganti button gimana mas
By Ai, at Monday, May 28, 2012 at 6:20:00 PM GMT+7
@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/
By Taufik Nurrohman, at Monday, May 28, 2012 at 7:17:00 PM GMT+7
@Taufik Nurrohman tapi Mas.. kok ga jalan ya di blog saya.. apa karena sebelumnya spoiler yang jquery udah tertanam di template?
By MUX SPARROW, at Friday, June 1, 2012 at 1:25:00 PM GMT+7
@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 :)
By Taufik Nurrohman, at Friday, June 1, 2012 at 1:59:00 PM GMT+7
@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. ^_^
By MUX SPARROW, at Friday, June 1, 2012 at 8:04:00 PM GMT+7
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...
By Mitra kreasi, at Friday, June 8, 2012 at 4:11:00 PM GMT+7
@Ohim Tumaritiz Cuma mengganti selektornya saja. Isinya jangan diapa-apakan. display:block itu cuma contoh.
By Taufik Nurrohman, at Friday, June 8, 2012 at 5:00:00 PM GMT+7
apakah sistem kerja Toggle PRE? yang dibawah blog ini cara kerjanya sama seperti cara ini ??
Thx Infonya... :-bd :-bd
By Yusril Ibnu Maulana, at Wednesday, July 18, 2012 at 8:39:00 PM GMT+7
Beda. Kalau yang ini memakai JavaScript.
By Taufik Nurrohman, at Wednesday, July 18, 2012 at 9:46:00 PM GMT+7
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
By Surga Kenari, at Tuesday, November 20, 2012 at 6:44:00 AM GMT+7
loadnya agak lama sudah saya terapkan,,
ketika di klik button checknya, keluarnya butuh waktu 3-4 detik untuk membuaka / menutup spoilernya..
By Surga Kenari, at Tuesday, November 20, 2012 at 7:24:00 AM GMT+7
cth : http://sdftyujklvbn.blogspot.com/2012/11/ini-dia-5-ponsel-teraneh-dan-terunik-di.html
By Surga Kenari, at Tuesday, November 20, 2012 at 7:25:00 AM GMT+7
Di Saya malah nggak jalan sama sekali.
By Taufik Nurrohman, at Tuesday, November 20, 2012 at 8:31:00 AM GMT+7
gmn ya mengatasinya? pdhl dah saya terapkan mas..
By Surga Kenari, at Tuesday, November 20, 2012 at 10:40:00 AM GMT+7
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>
By Taufik Nurrohman, at Tuesday, November 20, 2012 at 12:30:00 PM GMT+7
yes baru bisa thanks mas Taufik. :D !
By Surga Kenari, at Tuesday, November 20, 2012 at 10:36:00 PM GMT+7
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..
By Ana Sriwahyuni, at Saturday, April 6, 2013 at 5:42:00 AM GMT+7
⇒ /2012/02/tip-membuat-sidebar-akordion-pada-blog.html
By Taufik Nurrohman, at Tuesday, April 9, 2013 at 11:39:00 AM GMT+7
Mas kalau membuat spoilernya di posting Home gimana ya... terimakasih
By Unknown, at Saturday, May 11, 2013 at 2:51:00 PM GMT+7
Ah, menurut saya, bagusnya kalau si trigger nya disembunyikan dengan ini:
input.trigger {
position:absolute;
left:-9999999px;
top:-99999999px;
}
:)
By budkalon, at Tuesday, July 2, 2013 at 5:24:00 PM GMT+7
mas gimana caranya bikin spoiler yang ke samping, seperti widget daftar isi tabulasi.
By Unknown, at Monday, September 30, 2013 at 12:54:00 PM GMT+7
Post a Comment
<< Home