Efecto accordion con jQuery

Efecto accordion con jQuery

Un accordion es un efecto jQuery útil cuando se quiere mostrar mucho contenido en un espacio reducido y a la vez el contenido de interés.

Es por ejemplo un recurso común en las páginas de preguntas frecuentes.

En este ejercicio se aplican varios conceptos importantes para la resolución del mismo.

  • Como llamar y filtrar nodos e identificar aquellos que nos interesan.
  • Concepto de this.
  • Efectos show(), hide(), toggle(), toggleClass(), …
Efecto accordion con jQuery 1
resultado final tras resolver el ejercicio del accordion jquery

Adicionalmente se hace uso de recursos externos como es por ejemplo la librería de iconos de fontawesome.

Vayamos al ejercicio.

Enunciado

A continuación se te entrega un código con html y css al que debes añadir el javascript (jquery) necesario para obtener el resultado final del accordion mostrado en esta publicación.

Observaciones:

  • El símbolo + lo puedes representar mediante la classefa-plus.
  • El símbolo – lo puedes representar mediante la classe fa-minus.
  • Recientemente el cdn de fontawesome ha dejado de ser de dominio público y es posible que te de algún error. Si es el caso modifica la etiqueta <link> adecuadamente.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>accordeón</title>
	<style>
	*{box-sizing:border-box;}
	.faq{
		width:500px;
		border:1px solid #0000ff;
	}
	.title-tab{
		padding:16px 8px;
		background-color:#0000ff;
		color:#fff;
		border:1px solid  #fff;
	}

	.title-tab i{
		margin:8px;
	}

	.content-tab{
		padding:32px 8px;
	}
	</style>
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>

	<div class="faq">
		<div class="title-tab"><i class="fa fa-1x"></i>Pregunta frecuente 1</div>
		<div class="content-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia ut eligendi nisi cum obcaecati beatae.</div>
		<div class="title-tab"><i class="fa fa-1x"></i>Pregunta frecuente 2</div>
		<div class="content-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque corrupti aspernatur necessitatibus veniam, animi dolor!</div>
		<div class="title-tab"><i class="fa fa-1x"></i>Pregunta frecuente 3</div>
		<div class="content-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est praesentium ipsa enim, culpa facilis sunt!</div>
		<div class="title-tab"><i class="fa fa-1x"></i>Pregunta frecuente 4</div>
		<div class="content-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur, explicabo dolores, beatae tenetur sunt.</div>
	</div>

</body>
</html>

Solución del ejercicio

A continuación se presenta el código entero que resuelve el ejercicio.

Es importante tener en cuenta que esta es únicamente una solución y que bien seguro que existen muchas otras mejores y más optimas.

Explicación del código

Cuando se carga el documento se minimizan todos los div que contienen contenido excepto el primero. Además, a todos se les añade la clase fa-plus.

Cuando se hace click en un título en primer lugar se ocultan todos los contenidos y a continuación se muestra el que ha sido pulsado.

Con los símbolos + y – sucede lo mismo: se quitan todas las + para especificar un – en el título pulsado.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>accordeón</title>
	<style>
	*{box-sizing:border-box;}
	.faq{
		width:500px;
		border:1px solid #0000ff;
	}
	.title-tab{
		padding:16px 8px;
		background-color:#0000ff;
		color:#fff;
		border:1px solid  #fff;
	}

	.title-tab i{
		margin:8px;
	}

	.content-tab{
		padding:32px 8px;
	}

	.d-none{
		display:none;
	}



	</style>
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>

	<div class="faq">
		<div class="title-tab"><i class="fa fa-1x"></i>Pregunta frecuente 1</div>
		<div class="content-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia ut eligendi nisi cum obcaecati beatae.</div>
		<div class="title-tab"><i class="fa fa-1x"></i>Pregunta frecuente 2</div>
		<div class="content-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque corrupti aspernatur necessitatibus veniam, animi dolor!</div>
		<div class="title-tab"><i class="fa fa-1x"></i>Pregunta frecuente 3</div>
		<div class="content-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est praesentium ipsa enim, culpa facilis sunt!</div>
		<div class="title-tab"><i class="fa fa-1x"></i>Pregunta frecuente 4</div>
		<div class="content-tab">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur, explicabo dolores, beatae tenetur sunt.</div>
	</div>


	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
			$(".content-tab:not(:eq(0))").toggle();
			$(".title-tab i").toggleClass("fa-plus");

			$(".title-tab").click(function(){
				$(".content-tab").hide();
				$(".title-tab i").removeClass("fa-minus");
				$(".title-tab i").addClass("fa-plus");
				$(this).next().show();
				$(this).children().addClass("fa-minus");				
			})
		})

	</script>

</body>
</html>

La solución presentada fuerza que siempre haya como mínimo un texto desplegado.

Esto puede tener interés por ejemplo cuando por razones estéticas o de contenido se requiere siempre como mínimo una opción desplegada.

¡Hola!

Querido lector,

Existen muchas posibles soluciones. ¡Espero que la mía te haya ayudado!

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.