vertical accordion

• CSS

  .accordion { /* el contenedor */
    list-style: none;
    overflow: hidden;
    margin: 0;
    width: 720px;
    -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;}

• HTML 2

  <ul class="accordion">
    <li class="slide-01">
      <div>
        <h2>Pestaña 1</h2>
        ....... el contenido .......
      </div>
    </li>
    <li class="slide-02">
      <div>
        <h2>Pestaña 2</h2>
        ....... el contenido .......
      </div>
    </li>
    <li class="slide-03">
      <div>
        <h2>Pestaña 2</h2>
        ....... el contenido .......
      </div>
    </li>
  </ul>

• Pestaña 2

  

• Pestaña 1

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.

• Pestaña 2

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.

• Pestaña 3

  Когда за слабость принимают доброту
  Нетрудно лаять и кусать в ответ
  Сложней прожить и не утратить свет
  Я изувечусь, но пути свои пройду
  Я просто верю, что в природе зла
  Лежит нехватка света и тепла