Make Accordion Selonjor Ser-Ser

Trik ini dibuat perpaduan tutorial antara accordion use css3 dan accordion with css3 transitions! Versi pertama markup HTML menggunakan input type checkbox, sedang versi kedua pemakaian trik hover dalam membuka konten. Intinya fitur accordion ya memang seperti itu, tutup buka (show hide) Yuk kita mix kedua jenis tut's accordion tersebut menjadi auto hover ketika membuka konten bukan memakai tag input check-box, memakai icon panah murni pakai CSS!
Bingung juga bagian menerangkan dengan kata-kata. Soalnya Koben jg belajar secara otodidak, harap maklum deh jadinya yaaa...eik eik eik :p Selagi ada live demo, pasti deh bakal paham apa yang dimaksudkan :)
DEMO

• Dolor Sit Amet

  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

• Epsum Factorial

  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 lingua auxiliar su. Pote basate programma il nos. Non ha

• Europan Lingues

  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 gin. Ech ké ma'n d'Land, sech fort si gei. Blo an eise dann däischter. Wa wéi durch néierens. Am Bass

• Quande Lingues

  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.

Bayangkan hanya dengan trick ini, sobat dapat memiliki banyak area tersembunyi untuk menanamkan gadget apapun (HTML/Javascript)

<ul id="lonjor">
<li class="dropdown">
<h2>TITLE 1<span class="bullet"></span></h2>
<div>
BLAH-BLEH-BLOH I
</div>
</li>
<li class="dropdown">
<h2>TITLE 2<span class="bullet"></span></h2>
<div>
BLAH-BLEH-BLOH II
</div>
</li>
<li class="dropdown">
<h2>TITLE 3<span class="bullet"></span></h2>
<div>
BLAH-BLEH-BLOH III
</div>
</li>
<li class="dropdown">
<h2>TITLE 4<span class="bullet"></span></h2>
<div>
BLAH-BLEH-BLOH IV
</div>
</li>
<li class="dropdown">
<h2>TITLE 5<span class="bullet"></span></h2>
<div>
BLAH-BLEH-BLOH V
</div>
</li>
</ul>

ul#lonjor {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
border-radius: 5px;
}
.dropdown h2 {
font-size: 18px;
color: #eee;
cursor: pointer;
background: #000;
border-radius: 5px;
padding: 3px 5px;
margin: 5px 0;
}
ul#lonjor li span.bullet {
width: 0px;
height: 0px;
float: right;
margin-top: 0;
border-width: 6px;
border-style: solid;
border-color: transparent transparent #FFF;
border-image: none;
}
ul#lonjor li div {
height: 0px;
opacity: 0;
overflow: hidden;
margin: 0 7px;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
ul#lonjor li div {
font-size: 13px;
}
ul#lonjor li:hover div {
opacity: 1;
height: 150px;
overflow: auto;
}
ul#lonjor li.dropdown:hover span.bullet {
margin-top: 8px;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

Demikian tutorial membuat accordion selonjor ser-ser pure 100% memakai atribut CSS3 :)
Happy coding \m/