Full Stylish Accordion Just use CSS

Sebenarnya sudah terlalu banyak artikel di blog ini membahas tentang cara membuat accordion use CSS Tapi apa mau di kata, ketemu bahan untuk postingan sekarang ya dengan tema itu juga ;)) Gue dapat dari master Chris Ota, he is talked about "Pure HTML and CSS Accordion" on codepen. Ada keunikan tersendiri accordion karyanya, di mana ada efek timbul ke permukaan kala kita mengklik salah satu accordeon! You can get look of here pure HTML and CSS Accord.

.accordion {
background: #fff;
width: 400px;
margin: 0 auto;
padding: 0;
vertical-align: baseline;
border: 1px solid #e0e0e0;
}
.accordion,.accordion-child {list-style: none}
.accordion-item {
position: relative;
width: 100%;
border-bottom: 1px solid #e0e0e0;
}
.accordion-item: last-child {border-bottom: none}
.accordion-label {
padding: 20px 0 20px 30px;
width: 100%;
display: block;
font-size: 18px;
}
.accordion-label:hover {cursor: pointer}
.accordion-label:before {
content: '';
position: absolute;
height: 2px;
width: 2px;
top: 25px;
left: 13px;
border-left: 5px solid #999;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
input[type=checkbox]:checked ~ .accordion-label:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.accordion-child {
margin: 0;
overflow: hidden;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
opacity: 0;
height: 0;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: center top;
transform-origin: center top;
}
input[type=checkbox]:checked ~ .accordion-child {
border: 1px solid #e0e0e0;
margin: 0 -20px 15px -20px;
background: #fff;
box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.16);
padding: 30px;
height: auto;
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.hide {
clip: rect(0 0 0 0);
display: none;
}

<ul class="accordion">
<li class="accordion-item">
<input id="s1" class="hide" type="checkbox">
<label for="s1" class="accordion-label">First</label>
<ul class="accordion-child">
<li>
<label>
<input type="checkbox"> Item 1
</label>
</li>
<li>
<label>
<input type="checkbox"> Item 2
</label>
</li>
</ul>
</li>
<li class="accordion-item">
<input id="s2" class="hide" type="checkbox" checked="checked">
<label for="s2" class="accordion-label">Second</label>
<p class="accordion-child">BLAH BLAH BLAH</p>
</li>
<li class="accordion-item">
<input id="s3" class="hide" type="checkbox">
<label for="s3" class="accordion-label">Third</label>
<p class="accordion-child">BLEH BLEH BLEH</p>
</li>
</ul>

Hilangkan kode checked="checked" kalau pingin ke tutup.

Jika sobat mau menambahkan konten, maka perhatikan & buat syntax HTML seperti berikut <li class="accordion-item">
<input id="XX" class="hide" type="checkbox">
<label for="XX" class="accordion-label">TITLE</label>
<p class="accordion-child">BLEH BLEH BLEH</p>
</li>Kode ini harus berbeda XX

Demikian dan terima kasih :)
Sebagai bonus sikat tools sederhana keren punya and links source oke bingit'z:

>> Colofilter.css lukyvj.github.io/colofilter.css
>> Long Shadow Text codepen.io/gau/pen/JGWZed
>> Pure CSS Header Menu codepen.io/suez/pen/gPRjBo
>> CSS3 Image Filters on Hover codepen.io/gomezisdan/details/bEWdma
>> CodePen User Card codepen.io/andytran/pen/zrzvYQ
>> Awesome split-in-half hover effect codepen.io/vajkri/pen/LGjyzX
>> Star wars GIF maker codepen.io/jagarikin/pen/PZOrRP
>> Fullscreen Search codepen.io/suez/pen/obpLvy
>> Itchy Tanuki codepen.io/jasesmith/pen/pgdmdv
>> slidedoor codepen.io/nizhanjun/pen/JGOVNj
>> The Scroll of Lorem Ipsum codepen.io/browles/pen/pgdMbK
>> Pure CSS Modalbox codepen.io/brycesnyder/pen/JGOwwX
>> A Pen by Amanze Ogbonna codepen.io/darlingtonamz/pen/MKrYGL
>> Find the match - memory game codepen.io/kunukn/full/OMzvrM
>> Word Counter codepen.io/ChynoDeluxe/pen/obpOog
>> Rasteroid codepen.io/golle404/pen/NxqVKN
>> Easy Whitelist Regex Builder :) codepen.io/rlo206/pen/bEvVQN
>> Responsive Image Breakpoints Generator www.responsivebreakpoints.com
>> photo-editor github.com/fengyuanchen/photo-editor