04 Jun 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(), …
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 classe
fa-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!
Entradas relacionadas:
Como funciona la instrucción html() de jQuery y porqué no podemos usar innerHTML(). ¿Como deberíamos hacerlo para si poderla usar?
¿Estás intentando escribir jQuery y la función $() no hace nada? Posiblemente tienes un conflicto con el $. noConflict en esta entrada.
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Ejemplo práctico de como desactivar el envío de un formulario que pide aceptación RGPD (antigua LOPD) mediante jQuery y preventDefault()
Bienvenidos a un completo tutorial ordenado por dificultad creciente para todos aquellos que queráis aprender jQuery. Previamente es aconsejable un buen dominio de html, css y javascript. Todos estos ...
Ejercicio jQuery en que se programa un telepronter horizontal (o antiguo efecto marquee). Incluye solución y explicación.
Fabian
Posted at 23:13h, 01 marzoMuchas gracias! me sirvio mucho este codigo.
Modifique esta linea parq ue queden los 4 tabs cerrados por defecto :
$(«.content-tab:not(:eq(0))»).toggle();
por
$(«.content-tab:not(:eq(5))»).toggle();
(al haber solo 4 tabs pongo (5) y quedan todos cerrados.)
Lo que no puedo resolver, es lo de poder presionar en un tab abierto con el signo menos, para que se cierre nuevamente ese y queden todos cerrados.
Saludos
Fabian