Make Accordion Use CSS3 Latest

Walau sudah banyak orang yang memosting mengenai fitur accordion tidak ada salahnya lagi Koben kembali berbagi. Pada blog aneh ini saja tidak tahu sudah ada berapa biji :D Silahkan masukan keyword accordion pada kotak pencarian bila ingin melihat-lihat! Semakin banyak referensi, banyak juga metode, teknik digunakan dalam membuat accrodion yg semakin hari semakin indah. Tak lain dan tak bukan rujukan Koben ambil dari master @crnacura (Manoela) atau yg lebih dikenal dengan nama Mary LouMary Lou. Dengan satu bundel kode CSS3 jadi dapat menghasilkan 3 variabel accordion berbeda gaya @-) Lebih istimewanya lagi nih sob, si accordion yang ini dapat kita panggil dengan ID berbeda maka kalian dapat membuat sebanyak-banyaknya accrodion mau berapa biji juga :-/

Intinya dalam penulisan HTML nanti harus mempunyai uniqueID berbeda dalam memanggilnya :) Original article accordion with css3 by tympanus.net team terbagi menjadi 3 gaya yg hanya dibedakan dalam penulisan markup HTML-nya saja :-bd Style tersebut ialah Default Open (Checkboxes), Checkboxes, and Radio Buttons.

CSS3 Bundle of Accordion

.ac-container{
width: 99%;
margin: 0px auto;
text-align: left;
}
.ac-container label{
font-family: 'Arial Narrow', Arial, sans-serif;
padding: 0 10px 5px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
line-height: 33px;
font-size: 19px;
background: #FFF;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
background: #f4f4f4;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
background: #c6e1ec;
color: #3d7489;
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
content: '';
width: 24px;
height: 24px;
position: absolute;
right: 5px;
top: 5px;
background: transparent url(http://google.com/webmasters/tools/images/menu_down_arrow.gif) no-repeat center center; 
}
.ac-container input:checked + label:hover:after{
background-image: url(http://google.com/webmasters/tools/images/menu_up_arrow.gif);
}
.ac-container input{
display: none;
}
.ac-container article{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p{
color: #555;
line-height: 23px;
font-size: 14px;
padding: 0 5px 0 10px;
}
.ac-container input:checked ~ article{
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small{
height: 200px;overflow: auto;
}

CSS3 coded diatas sudah Koben rombak menjadi minimalis dengan membuang efek box shadow, text shadow dan menggabungkan beberapa kode yg sama dalam fungsinya ;) Benar tidaknya (valid) saya tidak tahu, tapi setelah praktek 100% berjalan mulus :D

Markup HTML

<div class="ac-container">

<div>
<input id="ac-1" name="accordion1" type="checkbox" />
<label for="ac-1">YOUR TITLE HERE</label>
<article class="ac-small">
<p>... YOUR BLAH BLEH BLOH HERE ...</p>
</article>
</div>

</div>Inti HTML segitu itu sob! Bila ingin menambahkannya kalian perhatikan unik ID yg saya bilang tadi!!! Watch it...
<input id="ac-1" name="accordion1" type="checkbox" />
<label for="ac-1">YOUR TITLE HERE</label>
UniqueID ac-1 yg harus kalian bedakan dalam menambahkan jumlah accordion. Kode yg lainnya mah sama :) Itu yg harus berbeda. Dan jangan lupa harus berada didalam tagging <div class="ac-container">

Ketiga demo dapat dilihat dimari (mudah²an jalan) :P

Demo Default Open (Checkboxes)

Home

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu te,

About us

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

Resource

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

Contact us

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 esperantio gaz, ti novju takak gramatik dva, des da tugde dumajm hrebet. Tot om vnov dost. Ti dev idijte sidili. Tri mama dikju polnite mi. Politju delanie lubovijm tut ne, bi grod cxernju din, sos cxai hcejm dolaris no. Tof bi glodju premnog slovenzem. Bi

Demo Checkboxes

Home

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu te,

About us

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

Resource

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

Contact us

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 esperantio gaz, ti novju takak gramatik dva, des da tugde dumajm hrebet. Tot om vnov dost. Ti dev idijte sidili. Tri mama dikju polnite mi. Politju delanie lubovijm tut ne, bi grod cxernju din, sos cxai hcejm dolaris no. Tof bi glodju premnog slovenzem. Bi

Demo Radio Buttons

Home

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu te,

About us

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

Resource

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

Contact us

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 esperantio gaz, ti novju takak gramatik dva, des da tugde dumajm hrebet. Tot om vnov dost. Ti dev idijte sidili. Tri mama dikju polnite mi. Politju delanie lubovijm tut ne, bi grod cxernju din, sos cxai hcejm dolaris no. Tof bi glodju premnog slovenzem. Bi

Happy coding \m/