Home » , , » CSS Spoiler

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;
}

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