Un acordeón es un elemento sencillo pero muy útil en el diseño web pues nos permite ahorrar espacio vertical en la página, además de aportar usabilidad y estética. Y en este post vamos a ver como escribir nuestro propio acordeon en apenas 7 líneas de jQuery. Comencemos.
La estructura HTML es muy sencilla, solamente un contenedor con la clase "acordeon" y varios elementos iguales dentro. Cada elemento del acordeon será un "h2" (el titulo en el que se hará clic) y un párrafo oculto por css (este se mostrará al hacer clic en el título).
El código es el siguiente (he puesto un solo item del acordeon, el resto siguen el mismo patrón).
<div class="acordeon__contenedor">
<h2 class="acordeon__titulo">Titulo</h2>
<p class="acordeon__contenido"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, ex, eligendi. Iste, beatae error magni a sequi sit voluptatum obcaecati recusandae, nisi ipsa laboriosam vero cupiditate vel molestiae reiciendis itaque.</p>
</div>En el css no hay mayor ciencia, solamente es aplicarle estilos para que se vea bonito. Lo único realmente importante es ocultar los parrafos con display:none para luego mostrarlos con jQuery.
body {
background: #222;
font-family: sans-serif;
margin: 0;
padding: 0;
font-size: .9em;
}
h1 {
text-align: center;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 2em;
}
.acordeon {
width: 70%;
margin: auto;
}
.acordeon__titulo {
color: rgba(255, 255, 255, 0.5);
background: #111;
line-height: 2.8;
padding: 0 1em;
font-size: 1.2em;
margin: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 -1px 0 0 #000 inset;
text-shadow: 1px 1px #000;
cursor: pointer;
}
.acordeon__contenido {
display: none;
margin: 0;
background: rgba(255, 255, 255, 0.5);
padding: 1em 1em 1.5em;
}Por último, el código de jQuery captura los clics en el contenedor del acordeon y los delega a los titulos. El secreto es seleccionar el parrafo siguiente al título al que le hemos clic para que se muestre y en otro selector el resto de párrafos para que se oculten si estaban mostrados.
$('.acordeon').on('click','h2',function(){
var t = $(this);
var tp = t.next();
var p = t.parent().siblings().find('p');
tp.slideToggle();
p.slideUp();
});Aqui lo puedes ver funcionando:
See the Pen Acordeon sencillo con jQuery by Escuela Digital (@escueladigital) on CodePen.
Y aquí el video: