Pestañas animadas (con widgets dentro o sin ellos) con CSS y jQuery

Desde hace un tiempo estaba viendo la barra lateral del blog algo recargada, así que me propuse mostrar la información «a petición del usuario», como podéis ver a la derecha, o aquí debajo:

(Click para ampliar imagen)

La idea de meter widgets dentro la saqué de compartidísimo, donde podéis ver cómo colocarlo en la sidebar, y el script está inspirado por CSSTricks, aunque es absolutamente propio.

Lo más interesante del script es que nos permite animar la altura (que se redimensione según las necesidades), en vez de desaparecer y mostrarse de golpe.

Demo y descarga

Instalar jQuery

Para esto tenéis que aseguraros de que tenéis jQuery en vuestra plantilla o página web. Para instalar jQuery lo único que tenéis que hacer es pegar esto encima de la etiqueta </head>. Si usáis otra librería no os preocupéis, que esto es compatible.

Nota importante: Todos los scripts que incluyáis que estén hechos con jQuery, no funcionarán si no los pegáis debajo del siguiente script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

Primer paso: el HTML

Es un contenedor normal, donde meteremos por un lado las pestañas y por otro el contenido que queremos que se vea. Cada pestaña será un link al contenido, que después animaremos con jQuery.

Mostrar/ocultar código


<div class="tab">
 <ul>
  <li class="activo"><a href="#pestana1">Tab 1</a></li>
  <li><a href="#pestana2">Tab 2</a></li>
  <li><a href="#pestana3">Tab 3</a></li>
 </ul>
 <div style="clear:both;"></div>
</div>
<div class="tabs-content">
 <div class="pestana" id="pestana1">
  Contenido 1
 </div>
 <div class="pestana" style="display: none;"id="pestana2">
  Contenido 2
 </div>
 <div class="pestana" style="display: none;"id="pestana3">
  Contenido 3
 </div>

Si lo queremos con widgets dentro, solo tendríamos que cambiar el contenido de la «tabs content» por un contenedor de widgets de Blogger.

Mostrar/ocultar código

<div class='tabs-content'>
<div class='pestana' id='pestana1'>
 <b:section id='widget-pestana-1' maxwidgets='1' showaddelement='yes'></b:section></div><div style='clear: both;'/>
<div class='pestana' id='pestana2' style='display:none;'>
 <b:section id='widget-pestana-2' maxwidgets='1' showaddelement='yes'></b:section></div>
<div class='pestana' id='pestana3' style='display:none;'>
 <b:section id='widget-pestana-3' maxwidgets='1' showaddelement='yes'></b:section></div>
</div>

Podéis Poner tantas pestañas como queráis, y los widgets los podréis colocar, tras guardar la plantilla, en la pestaña «Diseño».

Segundo paso: El CSS

Si no sabes lo que es el CSS, puedes mirar esta entrada. Hay muchas formas de darle estilos a las pestañas. Yo os dejo la que uso en el blog. Sólamente tenéis que buscar «]]></b:skin>» en vuestra plantilla y copiarlo encima.

Mostrar/ocultar código


.tab-wrapper{
 width:100%;/*Si lo vamos a usar en la sidebar, este es el mejor ancho. Si lo vas a usar aparte, puedes usar cualquier medida en "px" o "em"*/
 margin:0 auto;/*Para centrarlo*/
}
.tab-wrapper *{margin:0; padding:0;}/*Eliminamos todos los márgenes incómodos*/ 
.tab{
 margin:10px auto;
 display:table;/*Para centrar sin tener que fijar un ancho*/
}
.tab li{
 float:left;
 list-style: none;
 /*Fuente, color...*/
 font-family:'Ubuntu', Trebuchet, Arial, Helvetica, sans-serif;
 font-size:90%;
 background: #ccc;
 color:white;
 border-radius:4px;
 box-shadow:0 0 2px rgba(0,0,0,.4);
 /*Esto fijará el tamaño del botón*/
 padding:5px 7px;
 /*Distancia entre ellos*/
 margin:5px;
}
.tab li:hover, .tab li.activo{/*Al pasar el ratón por encima*/
 background:#B3B3B3;
} 
.tab li a,.tab li.activo a {/*Estilo de los links*/
 color:#2c2c2c;
 text-decoration:none;
}
.tabs-content{/*Donde irán los contenidos*/
 margin:0 auto;
 background:#eee;
 border-radius:5px; 
 padding:20px 10%;
 box-shadow:0 0 3px rgba(0,0,0,.4);
}
 .pestana{/*El contenido propiamente dicho*/
 background:#eee;
}

Tercer paso: El Javascript

El Javascript fue lo que más me costó, pero creo que la función está muy completa, y es compatible con otras librerías que no son jQuery. Para ponerla en blogger, hay que copiarla antes de «</head>, y tenéis que tener jQuery instalado (explicación).

Está muy comentada, aunque si tenéis alguna duda más, podéis comentar, y os responderé lo más rápido posible.

Mostrar/ocultar código


jQuery(document).ready(function($){
 $('#tabs1 .tab > ul > li').click(function(){
 var clicktab=$(this);//La pestaña en la que hacemos click
 var IDlistaActual=$('.tab > ul').find('li.activo').find('a').attr("href");//La pestaña que está mostrándose
 var IDlistaNueva=clicktab.find('a').attr("href");//La pestaña que vamos a mostrar
 var contenedor=$('#tabs1 .tabs-content');
 var alturaActual=contenedor.height();//La altura de la pestaña actual
  
 if (IDlistaActual != IDlistaNueva){//condicional, para que no se vuelva a hacer click en la misma pestaña
 //fijo la altura actual, para que cuando ocultemos la pestaña, no se oculte el "marco"
  contenedor.height(alturaActual);
  //Eliminamos la pestaña actual
  $(IDlistaActual).fadeOut(200,function(){
   $(IDlistaNueva).delay(300).fadeIn(300); //Ahora que ha aparecido la lista, fijamos la altura nueva
   var nuevaAltura=$(IDlistaNueva).height();//La altura a la que pasaremos
   //Animamos a la altura nueva
   contenedor.animate({height: nuevaAltura});
  });
 //Cambiamos el estilo a los botones sobre los que hacemos click
  $('.tab > ul > li').removeClass('activo');
  clicktab.addClass('activo');
 //Pongo la altura automática cuando se hace click, para que no se quede quieto cuando expandamos el archivo del blog, es opcional.
  contenedor.click(function(){
   contenedor.height('auto');
  });
 }
 //Terminamos la función
 return false;
 });
});

El resultado

Bueno, pues eso ha sido todo hoy, os dejo con la demo (hay 4 diseños distintos) y la descarga:

Demo

Descarga