El otro día me vi en la obligación de realizar un acordeón para una web, donde se mostrasen imagenes, enlaces... En un principio pensé en utilizar jqueryUi, pero luego pensé que seguro que no era difícil hacerlo con HTML y CSS de modo que empecé a pensar un poquito e hice el siguiente acordeón para colocar donde queramos y con bastante funcionalidad:
La verdad es que el código es muy sencillo, con dos archivos, uno html que enlaza a otro css. El html, como vemos, no deja de ser una repetición de un div que es el contiene a cada sección:
El código css recoge las clases para ordenar los divs, las imágenes y los enlaces, creando la animación...
Con tan solo unos pequeños conocimientos de CSS podrás entender este simple código:
Como podemos ver, casi todo el código es poner colores, fondos, paddins... por lo que tampoco voy a explicarlos pero la magia se encuentra aquí:
Aquí podemos observar como la información tiene una altura de 0px y un overflow: hidden, lo cual hace que se oculte todo el contenido en el interior de la caja llamada información, pero finalmente vemos como cuando colocamos el ratón sobre la caja seccion, la información toma una altura de 180px, lo que necesitamos para nuestro acordeón, con una animación suave debido a la propiedad transition.
De esta forma tan simple y sencilla tendremos nuestro acordeón listo para colocar en cualquier parte de nuestra web, con unos leves cambios de estilo para adaptarlo a nuestras necesidades.
La verdad es que el código es muy sencillo, con dos archivos, uno html que enlaza a otro css. El html, como vemos, no deja de ser una repetición de un div que es el contiene a cada sección:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>acordeon</title>
<link rel="stylesheet" href="css/estilo.css">
<!--Código realizado por Mialto-->
</head>
<body>
<!--Cada sección es una pestaña en el acordeón, podemos poner tantas como queramos,
tan solo tenemos que repetir el siguiente div una y otra vez.-->
<div class="seccion">
<div class="titulo">
<p class="titulo">netrunning<img class="cruz" src="img/plus.png" width="22" height="22"></p>
</div>
<div class="informacion">
<p class="informacion"><img class="imginformacion" src="img/imagen.jpg" width="96" height="96">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ullam, veniam tenetur est nihil odit culpa a enim cupiditate explicabo error, nam distinctio vel eum, cumque nulla ea? Provident, ab!</p>
<a href="#" class="detalles">Detalles</a><br>
<div class="marca"></div>
</div>
</div>
</body>
</html>
El código css recoge las clases para ordenar los divs, las imágenes y los enlaces, creando la animación...
Con tan solo unos pequeños conocimientos de CSS podrás entender este simple código:
div.seccion{
width:30%;
min-height:50px;
}
div.titulo{
width:100%;
height:50px;
overflow: hidden;
border-bottom: 1px solid #008238;
}
p.titulo{
margin:13px;
color: #008238;
}
div.informacion{
width:100%;
height:0px;
background-color: #f5f5f5;
overflow: hidden;
transition: 2s;
-webkit-transiton: height 2s;
}
p.informacion{
color:#4f4f4f;
}
div.seccion:hover div.informacion{
height:180px;
}
.detalles{
float:right;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
background-color: #008238;
color: white;
}
a.detalles{
text-decoration: none;
}
.cruz{
float:right;
margin-right:10px;
}
.detalles:hover{
background-color: #7CBA3D;
}
.imginformacion{
float:left;
margin: 10px;
}
.marca{
clear: both;
height:2px;
width: 100%;
background-color: #7CBA3D;
}
Como podemos ver, casi todo el código es poner colores, fondos, paddins... por lo que tampoco voy a explicarlos pero la magia se encuentra aquí:
div.informacion{
width:100%;
height:0px;
background-color: #f5f5f5;
overflow: hidden;
transition: 2s;
-webkit-transiton: height 2s;
}
p.informacion{
color:#4f4f4f;
}
div.seccion:hover div.informacion{
height:180px;
}
Aquí podemos observar como la información tiene una altura de 0px y un overflow: hidden, lo cual hace que se oculte todo el contenido en el interior de la caja llamada información, pero finalmente vemos como cuando colocamos el ratón sobre la caja seccion, la información toma una altura de 180px, lo que necesitamos para nuestro acordeón, con una animación suave debido a la propiedad transition.
De esta forma tan simple y sencilla tendremos nuestro acordeón listo para colocar en cualquier parte de nuestra web, con unos leves cambios de estilo para adaptarlo a nuestras necesidades.
No hay comentarios:
Publicar un comentario