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;
}
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

0 comments:

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Homtimpa - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger