Acordeones sólo con CSS

Y seguimos jugando con esto del CSS3, viendo que las cosas se ponen muy interesantes porque no parece haber límites a la imaginación.

Esta vez, se trata de dos experimentos de W3avenue que crean acordeones desplegables sin necesitad de scripts de ninguna clase y que, para colmo, funcionan en todos los navegadores, incluyendo Internet Explorer. Uno de ellos genera un acordeón vertical y el otro un acordeón horizontal. En ambos casos, la página del autor nos facilita la descarga de los demos; un archivo CSS y un archivo HTML.

El HTML es la parte simple, sólo son listas de este tipo:

<ul>
  <li>
    <h3>Título 1</h3>
    <div> ... el contenido ...</div>
  </li>
  <li>
    <h3>Título 2</h3>
    <div> ... el contenido ...</div>
  </li>
  <li>
    <h3>Título 3</h3>
    <div> ... el contenido ...</div>
  </li>
</ul>

La única diferencia entre los dos modelos es que las colocamos dentro de DIVs que tienen una clase diferente:

<div class="verticalaccordion">
  ... aquí ponemos la lista y se generará un acordeón vertical ...
</div>

<div class="horizontalaccordion">
  ... aquí ponemos la lista y se generará un acordeón horizontal ...
</div>

Hasta acá, no debería haber problemas; puede haber tantas pestañas como se nos de la gana y el contenido de cada una es cualquier código HTML válido.

Lo que las diferencia es el CSS que es bastante sofisticado. El más simple y flexible es el del acordeón vertical:

<style>
.verticalaccordion>ul { /* este es el DIV contenedor que dimensionamos y en este caso lo centramos */
  margin: 0 auto;
  padding: 0;
  list-style: none;
  width: 500px;
}
.verticalaccordion>ul>li { /* definimos cada item de la lista  */
  display: block;
  height:40px; /* la altura de las pestañas */
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  text-align:center;
  width: 500px;
  /* la parte personalizable */
  background-color:#303941;
  transition: height 0.3s ease-in-out;
  -moz-transition: height 0.3s ease-in-out;
  -webkit-transition: height 0.3s ease-in-out;
  -o-transition: height 0.3s ease-in-out;
}
.verticalaccordion>ul>li>h3 { /* el titulo de cada pestaña   */
  display: block;
  margin: 0;
  padding: 10px;
  height: 19px;
  /* la parte personalizable */
  color: #000;
  border-top:1px solid #303941;
  font-family: Lucida Grande;
  font-size:20px;
  text-decoration:none;
  text-transform:uppercase;
  background: #CCC;
  background: -moz-linear-gradient( top, #999999, #cccccc);
  background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
}
.verticalaccordion>ul>li>div { /* el contenido oculto */
  margin: 0;
  overflow: auto;
  padding: 10px;
}
.verticalaccordion>ul>li:hover { /* que se despliega al poner el cursor del ratón encima */
height: 100%;
}
.verticalaccordion:hover>ul>li:hover>h3 { /* efecto hover sobre los títulos */
  color: #FFF;
  background: #000;
  background: -moz-linear-gradient( top, #454545, #000000);
  background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";
}
.verticalaccordion>ul>li>h3:hover {
  cursor:pointer;
}
</style>

Y este será el resultado:

• Mi primer ejemplo

  Suspendisse sed lacus eget urna tincidunt aliquet. Cras dignissim facilisis ligula non semper! Donec porta adipiscing bibendum. Integer sit amet sem at elit luctus faucibus. Sed sollicitudin sem sed velit euismod rutrum. Aliquam fringilla elit et enim dictum sodales. Fusce augue magna, vestibulum rhoncus vehicula vitae, interdum ac purus! Aenean tellus dolor, vulputate in congue sit amet, dignissim eu erat. Nam dapibus, mauris dictum auctor tempus, sem nunc volutpat nisl, at fermentum odio quam sit amet est. Aliquam et nisl eu elit bibendum malesuada.

• Una imagen

  

  café ... mucho café

• Buscador

  
  

El acordeón horizontal tiene diferencias importantes, una de ellas es que debemos establecer su altura como fija así que el resultado es menos flexible:

<style>
.horizontalaccordion>ul { /* este es el DIV contenedor que dimensionamos y en este caso lo centramos */
  margin: 0;
  padding: 0;
  list-style:none;
  height: 300px;
}
.horizontalaccordion>ul>li { /* definimos cada item de la lista */
  display: block;
  float: left;
  height: 300px;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 40px;
  /* la parte personalizable */
  background:#303941;
  transition: width 0.3s ease-in-out;
  -moz-transition: width 0.3s ease-in-out;
  -webkit-transition: width 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out;
}

.horizontalaccordion>ul>li>h3 { /* el titulo de cada pestaña */
  display: block;
  float: left;
  margin: 0;
  padding: 10px;
  height: 19px;
  width: 280px;
  /* la parte personalizable */
  border-left: 1px solid #303941;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  background:#CCC;
  white-space: nowrap;
  /* los efectos  para los diferentes navegadores */
  -moz-transform: rotate(90.0deg) translate(-40px,0px);
  -moz-transform-origin: 0 100%;
  -o-transform: rotate(90.0deg) translate(-40px,0px);
  -o-transform-origin: 0 100%;
  -webkit-transform: rotate(90.0deg) translate(-40px,0px);
  -webkit-transform-origin: 0 100%;
  transform: rotate(90.0deg) translate(-40px,0px);
  transform-origin: 0 100%;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0) progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)" "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
  background: -moz-linear-gradient( top, #999999, #cccccc);
  background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
}
.horizontalaccordion>ul>li>div {  /* el contenido oculto */
  display: none;
  float: left;
  height: 280px;
  margin: 0;
  overflow: auto;
  padding: 10px;
  position: relative;
  width: 320px;
  left: 40px;
  top: -40px;
  *left:0px; *top:0px; /* esto es necesario para evitar problemas en IE7 */
}
.horizontalaccordion>ul>li:hover { /* que se despliega al poner el cursor del ratón encima */
  overflow: hidden;
  width: 380px;
}
.horizontalaccordion:hover>ul>li:hover>div {
  display: block;
}
.horizontalaccordion:hover>ul>li:hover>h3 { /* efecto hover sobre los títulos */
  background: #000;
  color: #FFF;
  background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
  background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0) progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)" "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";
}
.horizontalaccordion>ul>li>h3:hover {
  cursor: pointer;
}
</style>

Y esto es lo que veremos:

• Mi primer ejemplo

  Suspendisse sed lacus eget urna tincidunt aliquet. Cras dignissim facilisis ligula non semper! Donec porta adipiscing bibendum. Integer sit amet sem at elit luctus faucibus. Sed sollicitudin sem sed velit euismod rutrum. Aliquam fringilla elit et enim dictum sodales. Fusce augue magna, vestibulum rhoncus vehicula vitae, interdum ac purus! Aenean tellus dolor, vulputate in congue sit amet, dignissim eu erat.

• Una imagen

  

  café ... mucho café

• Buscador