Caja para contenido con efecto 'acordeon'

Este contenedor o caja es muy practico para almacenar contenidos, bien sea texto, imagenenes, videos o enlaces. Ademas, cuenta con un efecto 'acordeon' que expande y contrae automaticamente los elementos (cada uno con el fondo de un color) al pasar el cursor.

Para insertarla en nuestro blog o web, primero tenemos que añadir el siguiente codigo CSS. En el, podeis modificar lo que esta en rojo para cambiar el tamaño.

<style>
#acordeon {
   border:5px solid #000;
   width: 500px;
   height: 400px;
   margin: 100px auto; }
#acordeon div {
   height:25%;
   overflow: hidden;}
#acordeon:hover div {
   height: 20px; }
#acordeon:hover div:hover {
   height: 340px;
   overflow: auto; }
 
#primero {
   background-color: #CCFF99; }
#segundo {
   background-color:#FF6633; }
#tercero {
   background-color: #FFCC00; }
#cuarto {
   background-color:#99FFFF; }
titulo {
   font-size: 150%;
   margin: 10px 10px .2em 25px; }
p {
   margin: 1em 25px; }
</style>

Ahora nos queda poner el codigo HTML alli donde queramos mostrar la caja. Donde esta en rojo lo cambiais por el titulo y por el contenido.

<div id="acordeon"> <div id="primero"> <titulo>TITULO AQUI</titulo> <center>CONTENIDO AQUI</center></div> <div id="segundo"> <titulo>TITULO AQUI</titulo> <center>CONTENIDO AQUI</center></div> <div id="tercero"> <titulo>TITULO AQUI</titulo> <center>CONTENIDO AQUI</center></div> <div id="cuarto"> <titulo>TITULO AQUI</titulo> <center>CONTENIDO AQUI</center></div> <div style="clear: both; float: none; height: 0;"> </div> </div>

Y el resultado de nuestra caja sera este:

BANNER

ARTICULO
Los que uséis servicios ofrecidos por Google o visitéis simplemente el buscador, habéis podido notar que están llevando a cabo un rediseño de toda la interfaz web de sus herramientas. La última que ha visto como su interfaz ha sido remodelada desde cero es Blogger. De esta forma pasa de tener una interfaz arcaica con bastantes años de antigüedad a convertirse en un servicio web moderno, acorde con el resto de la oferta de Google.Los que uséis servicios ofrecidos por Google o visitéis simplemente el buscador, habéis podido notar que están llevando a cabo un rediseño de toda la interfaz web de sus herramientas. La última que ha visto como su interfaz ha sido remodelada desde cero es Blogger. De esta forma pasa de tener una interfaz arcaica con bastantes años de antigüedad a convertirse en un servicio web moderno, acorde con el resto de la oferta de Google.

VIDEO

IMAGEN