Contoh Accordion Dengan CSS3

<!-----Kode CSS----->

<style type="text/css">
.accordion { /* el contenedor */
  list-style: none;
  overflow: hidden;
  margin: 0;
  width: 620px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
.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: 210px; /* la altura máxima que le daremos */
  width: 200px; /* el ancho por defecto */
  /* las propeidades de animación */
  -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 { /* bordes redondeados de la primera pestaña */
  -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{ /* bordes redondeados de la última pestaña */
  -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 {
   /* al colocar el cursor encima de cualquiera se reduce el ancho de todas */
  width: 100px;
}
.accordion li:hover {
   /* y aumenta el ancho de la que estamos seleccionando */
  width: 400px;
}
/* los colores de cada pestañ */
.slide-01 {background:#404951; color:#FFF;}
.slide-02 {background:#606971; color:#FFF;}
.slide-03 {background:#808991; color:#FFF;}
</style>

<!-----Kode HTML----->

<ul class="accordion">
  <li class="slide-01">
    <div>
      <h2>TAB 1</h2>
      ....... Konten Anda disini .......
    </div>
  </li>
  <li class="slide-02">
    <div>
      <h2>TAB 2</h2>
      ....... Konten Anda disini .......
    </div>
  </li>
  <li class="slide-03">
    <div>
      <h2>TAB 2</h2>
      ....... Konten Anda disini .......
    </div>
  </li>
</ul>