Full Stylish Accordion Just use CSS - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Full Stylish Accordion Just use CSS , we have prepared well for this article you read and download the information therein. hopefully fill posts Article CSS, Article CSS3, Article HTML, Article Informasi, Article Resource, Article Tutorial, Article Web, we write this you can understand. Well, happy reading.

Title : Full Stylish Accordion Just use CSS
link : Full Stylish Accordion Just use CSS

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

Thus articles Full Stylish Accordion Just use CSS

that is all articles Full Stylish Accordion Just use CSS This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Full Stylish Accordion Just use CSS with the link address https://autopostingblogspot.blogspot.com/2016/01/full-stylish-accordion-just-use-css.html