Click CSS Input is Like Spoiler

Setelah beberapa postingan aku paparkan kepada kalian tentang variabel input Apalagi dengan hadirnya bahasa CSS versi iii menambahkan nilai lebih tersendiri. Berikut beberapa trik yang menggunakan input It's All About INPUT HTML Tag, Make Accordion Use CSS3 Latest, atau Make TreeVew Menu Without JavaScript.
Sekarang variable input akan dikreasikan agar dapat memiliki fungsi layaknya Spoiler! Ingat baik-baik ya, tag INPUT ini bisa mempunyai fungsi berbeda-beda tergantung kita mau dirangkai dengan apa? Check this out input Koben kurang pandai dalam menjelaskan, perhatikan saja deh yah :p

.title1 {
  border-bottom: 1px dotted #AAA;
  cursor: pointer;
  font-size: 16px;
}
.area1 {
  border: 1px solid #444;
  font-size: 12px;
  margin: 20px 0;
  padding: 10px;
  text-align: justify;
}
span:focus ~ .click1 {
  display: block;
}
.click1 {
  display: none;
}

HTML planning

<span class="title1" tabindex="0">YOUR TITLE</span>

<div class="click1 area1">



---- YOUR CONTENT HERE ----



</div>

Demo
demo 1

Cxtir sonis li kak, on mne maks zvestis profesor. Gda polakju blagodarim vo. Troh zxiznuf mai te. Kupit pervju jazikas na sos, kak iz edat podpor. Pisajut hrvatzem dev mi, jazika partner rodzinuf zxe ne, razumju belaruszem des bu. Uzx zavod tomatis televidenie do. Znat dajte dev no, ku hce gladju sportju vipolnil. Li mesto

demo 2

Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss grousse vu, Hämmel meescht d'Blumme hu zum. Rem am Monn riede, op och Stret méngem iweral, ma'n iw'rem d'Margréitchen do

Tutorial diatas yaitu mode click focus dengan satu fungsi menampilkan, dan untuk menghilangkan klik saja pada area kosong! Lantas bagaimana kalau menampilkan/menghilangkan terfokus pada satu area? Like this
Demo
demo 3

Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente. Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in. Sine paternoster simplificate su non, anglese moderne secundo da web. Non message linguistas al, non nomine capital primarimente su. Effortio linguistic litteratura o que, pro

.toggle {
  cursor: pointer;
}
:checked ~ .areatog {
  display: block;
  padding: 5px 10px;
  border: 1px solid #EEE;
  background: #F1F1F1;
}
.areatog, .toggled[type=checkbox] {
  display: none;
}

Markup HTML

<label class="toggle" for="toggle" title="klik di sini">YOUR TITLE</label>

<input type="checkbox" id="toggle" class="toggled" />

<div class="areatog">

---- YOUR CONTENT HERE ----

</div>

Karena sekarang musimnya memakai efek transition, gimana tuh caranya biar ada efek slow motion pada content like spoiler tersebut! Begini contohnya

.spoilerbutton {
  display: block;
  margin: 5px 0;
}
.spoiler {
  overflow: hidden;
  background: #f5f5f5;
}
.spoiler > div {
  -webkit-transition: all 0.3s ease;
  -moz-transition: margin 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: margin 0.3s ease;
}
.spoilerbutton[value="Buka"] + .spoiler > div {
  margin-top: -100%;
}
.spoilerbutton[value="Tutup"] + .spoiler {
  padding: 5px;
}

HTML Markup

<input class="spoilerbutton" type="button" value="Buka" onclick="this.value=this.value=='Buka'?'Tutup':'Buka';">

<div class="spoiler">

<div>

PUT YOUR CONTENT TO HIDE HERE

</div>

</div>

Nah terserah kalian suka yg mana silahkan dipilih :)
Resource

Eventos click y CSS & Content Spoiler With Simple Animation

Happy coding \m/