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!
Deja una respuesta