¿Cómo crear un Acordeón con HTML5 y CSS3?
¿Cómo crear un Acordeón con HTML5 y CSS3?
En esta práctica aprenderás cómo crear un acordeón animado con instrucciones sencillas de CSS3.
Pero primero que todo, ¿qué es un acordeón en el mundo de la web? En términos simples, y al igual que en la vida real, es un elemento organizador que permite empaquetar muchos contenidos en un espacio reducido.
De esta forma, al finalizar esta práctica tendremos el siguiente resultado:
Para lograr este resultado debemos hacer el siguiente código html:
<!DOCTYPE html> <html>
<head>
<title>Crear un acordeon con CSS3 </title>
<link type=”text/css” rel=”stylesheet” href=”estilo.css”>
</head>
<body>
<div class=”accordion”>
<section id=”one”>
<h2><a href=”#one”>Heading 1</a></h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</section>
<section id=”two”>
<h2><a href=”#two”>Heading 2</a></h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</section>
<section id=”three”> <h2><a href=”#three”>Heading 3</a></h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</section>
<section id=”four”> <h2><a href=”#four”>Heading 4</a></h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</section>
<section id=”five”> <h2><a href=”#five”>Heading 5</a></h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</section>
</div>
</body>
</html>
Luego debemos crear un archivo css llamado estilo y darle la apariencia deseada de acordeón de la siguiente manera:
Estilo.css
#contenedor { width: 100%; height: 300px;
border-spacing: 5px;
background-color: blue;
}
#contenidos { display: block; background-color: pink;
}
#principal, #secundario, #lateral {
display: block;
}
#principal {
background-color: red;
width: 60%;
float: right;
}
#secundario, #lateral {
width: 20%;
}
body { padding: 0; margin: 0;
}
section {
display: block;
}
.accordion {
background-color: #eee; border: 1px solid #ccc; width: 600px;
padding: 10px;
margin: 50px auto;
/* Bordes redondeados */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
/* Sombra del contenedor */
-moz-box-shadow: 0 1px 0 #999;
-webkit-box-shadow: 0 1px 0 #999;
box-shadow: 0 1px 0 #999;
}
.accordion section
{ border-bottom: 1px solid #ccc;
margin: 5px;
/* Fondo en degradado de colores */
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(top, #fff, #eee); background-image: -moz-linear-gradient(top, #fff, #eee); background-image: -ms-linear-gradient(top, #fff, #eee); background-image: -o-linear-gradient(top, #fff, #eee); background-image: linear-gradient(top, #fff, #eee);
/* Bordes redondeados */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.accordion h2, .accordion p {
margin: 0;
}
.accordion p {
padding: 10px;
}
.accordion h2 a { display: block; position: relative;
font: 14px/1 ‘Trebuchet MS’, ‘Lucida Sans’;
padding: 10px;
color: #333;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.accordion h2 a:hover {
background: #fff;
}
.accordion h2 + div {
height: 0;
overflow: hidden;
/* Transiciones */
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
}
.accordion :target h2 a:after {
content: ”;
position: absolute;
right: 10px;
top: 50%;
margin-top: -3px;
border-top: 5px solid #333;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.accordion :target h2 + div {
height: 100px;
}
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros