Acordeón con jQuery

En este tutorial vamos a ver cómo puedes crear un efecto tipo acordeón con jQuery. En caso de que no sepas lo que es jQuery o si no sabes utilizarlo, consulta primero el tutorial de introducción a jQuery.

Se denomina efecto acordeón al efecto que incluye una serie de cabeceras que abren y cierran una serie de paneles con contenido. Cada cabecera de nuestro acordeón abrirá o colapsará su respectivo panel. Existen dos modalidades, una en la que cuando haces clic en una cabecera simplemente se abre su respectivo panel y otra en la que también se cierran todos los demás. En este ejemplo veremos cómo crear la primera modalidad.

Antes de comenzar, asegúrate de incluir el script jQuery en tu proyecto.

Versión simplificada

Vamos a empezar agregando el siguiente código HTML, en el que agregamos un elemento con la clase .acordeon que incluye varios pares de cabeceras .acordeon-cabecera y paneles de contenido .acordeon-contenido:

<h1>Acordeón</h1>

<div class="acordeon">
  <div class="acordeon-cabecera">Cabecera 1</div>
  <div class="acordeon-contenido">Lorem ipsum dolor sit amet consectetur adipiscing elit, id nibh nulla enim dis tempor. Eu ultrices interdum vivamus.</div>

  <div class="acordeon-cabecera">Cabecera 2</div>
  <div class="acordeon-contenido">Ultrices enim potenti hac proin egestas imperdiet placerat luctus sem sapien et sed, ante conubia malesuada.</div>

  <div class="acordeon-cabecera">Cabecera 3</div>
  <div class="acordeon-contenido">Dis tempor blandit convallis morbi dictumst tempus non fermentum, ligula suscipit curabitur tellus at dignissim orci.</div>
</div>

Seguidamente, vamos a agregar el código JavaScript que hará que el acordeón funcione. Lo único que hacemos es ejecutar una función cuando se haga clic en alguna cebecera. En dicha función agregamos o eliminamos la clase .active de la cabecera mediante el método toggleClass("active"). de esta forma podemos aplicar ciertos estilos a las cebeceras que se encuentren activas.

Luego seleccionamos el siguiente elemento, que será el contenido de cada panel, mediante el método next() y mostramos y ocultamos el panel mediante el método slideToggle():

$(".acordeon").on("click", ".acordeon-cabecera", function() {
 	$(this).toggleClass("active").next().slideToggle();
 });

Vamos a agregar también algunos estilos CSS muy básicos:

.acordeon-cabecera {
  cursor: pointer;
}

.acordeon-contenido {
  display: none;
}

.acordeon {
  font-weight: 800;
}

Y con esto ya estaría listo. Puedes ver el resultado en funcionamiento aquí.

Versión avanzada

Vamos a mejorar algo el aspecto de nuestro acordeón. Para ello bastará con que agreguemos algunos estilos CSS:

html {
	min-height: 100%;
	font-family: 'Nunito', sans-serif;
}

body {
	background: #7db4fc;
	line-height: 1.5;
}

h1 {
	font-weight: 200;
	font-size: 3rem;
	color: white;
	text-align: center;
}

.acordeon {
	max-width: 400px;
	background: white;
	margin: 0 auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.acordeon-cabecera {
	border-bottom: 1px solid #DDE0E7;
	color: #222222;
	cursor: pointer;
	font-weight: 600;
	padding: 1.5rem;
  background:#f6f7f9;
}

.acordeon-cabecera:hover {
	background: #fdf8d7;
}

.acordeon-cabecera.active {
	background-color: #fdf8d7;
}

.acordeon-contenido {
	display: none;
	border-bottom: 1px solid #DDE0E7;
	background: #fff;
	padding: 1.4rem;
	color: #4a5666;
}

Y con esto ya estaría listo. Puedes ver el resultado en funcionamiento aquí.

---