Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan 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:

Suscríbete al blog de EDteam

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