Animatie - Exemplu de acordeon cu CSS

Acest exemplu de acordeon create numai cu CSS si care lucreaza în mod normal, în orice browser, dar este pregatit sa functioneze corect în Chrome, Opera şi Firefox 4.
Exemplu acordeon orizontal este cel care se potriveste cel mai bine in orice situatie si poate fi folosit cu latimi fixe şi procente, aici, spre deosebire de original, voi folosi prima metoda în cazul in care HTML este o lista ordonata, deci intr-o postare noua se adauga urmatorul cod:

<ul class="accordion">
<li class="slide-01">
<div>
<h2>Fila 1</h2>
....... aici textul .......
</div>
</li>
<li class="slide-02">
<div>
<h2>Fila 2</h2>
....... aici textul .......
</div>
</li>
<li class="slide-03">
<div>
<h2>Fila 3</h2>
....... aici textul .......
</div>
</li>
</ul>

Ultimul pas mergi la Desing --> Editati HTML si exact inaintea liniei ]]></b:skin> adaugi urmatorul CSS:

.accordion h2 { /* el título */
color: #DEF;
font-family: Helvetica;
font-size: 20px;
margin: 0 0 0.5em;
text-align: center;
}
.accordion li { /* cada item de la lista */
float: left;
overflow: hidden;
height: 160px; /* inaltimea maxima ce dorim */
width: 150px; /* latime maxima ce dorim */
/* propietati de animatie */
-moz-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-moz-transition-delay: 0.15s;
-webkit-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.accordion li:first-of-type { /* margini rotunde de la prima fila */
-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-o-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
}
.accordion li:last-of-type{ /* margini rotunde de la ultima fila */
-moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-o-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
}
.accordion div { /* el contenido */
padding: 10px;
}
.accordion:hover li {
/* pasar mouse se reduce latimea de la toate filele */
width: 100px;
}
.accordion li:hover {
/* se mareste latimea de la fila care o selectionam cu mouse-ul */
width: 300px;
}
/* culoare pentru fiecare fila */
.slide-01 {background:#404951; color:#FFF;}
.slide-02 {background:#606971; color:#FFF;}
.slide-03 {background:#808991; color:#FFF;}

Si rezultatul il poti vedea aici:

Un alt exempu de acordeon dar pe verticala gasesti in Vagabundia