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;
}
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;
}
0 komentar:
Posting Komentar