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:0px;
  padding:0px;
}

.spoiler {
  background-color:white;
  padding:15px 30px;
  margin:10px 0px 0px;
  display:none;
}

input.trigger:checked + .spoiler,
input.trigger:checked + br + .spoiler {
  display:block;
}

Lihat Demo

Dengan CSS3 Transisi

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:checked + .spoiler,
input.trigger:checked + br + .spoiler {
  padding:15px 30px;
  visibility:visible;
  height:300px;
  overflow:auto;
}

Lihat Demo

Categories: Blogspot, CSS