Pasar al contenido principal
Jose Luján
Luis Avilés
Álvaro Felipe, Jon Mircha
Álvaro Felipe
Alberto Quiroga
Alexys Lozada, Álvaro Felipe, Daniel Romero, Jon Mircha
Daniel Romero
Alexys Lozada, Daniel Romero
Álvaro Felipe
Francisco Romero
Alexys Lozada
Álvaro Felipe
Jon Mircha
Álvaro Felipe
Daniel Romero
Daniel Romero
Jose Luján
Álvaro Felipe
Freddy Cahuas
Álvaro Felipe
Jon Mircha

¿Cómo crear un acordeon con jQuery?

¿Cómo crear un acordeon con jQuery? - Blog de Escuela Digital

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:

SCRUM Desde Cero

Creemos en las ideas que nacen como producto de la mejora continua, que buscan mejorar la vida de las personas, creemos que es...

Si este artículo te gustó suscríbete para recibir novedades del blog y promociones de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal