Uno de los blogs que sigo es el de David Walsh y hoy ví un interesante tutorial que muestra cómo implementar una sección de preguntas frecuentes (FAQs) usando jQuery Sliders. El efecto que se pretende lograr, es que aparezca un listado de las preguntas más frecuentes, al hacer clic sobre este, que se deslice hacia abajo mostrando el texto de la respuesta.
Implementación
Primero tenemos que crear la estructura HTML, que para este caso se trata de un título o pregunta y su respuesta, para lo que vamos a usar un H3 para el título y un P para el texto de la respuesta.
<h3>This is question 1?</h3> <div> <p>This is the answer to question #1. Pellentesque habitant morbi....</p> </div> <h3>This is question 2?</h3> <div> <p>This is the answer to question #2. Pellentesque habitant morbi....</p> </div>
Luego algunos estilos CSS:
#faqs h3 { cursor:pointer; }
#faqs h3.active { color:#d74646; }
#faqs div { position:relative; }
#faqs div p { padding:0; margin-bottom:15px; }
Hasta aquí nada complicado, todo muy simple. Lo que sigue es el código Javascript que le da vida a esta sección que estamos creando:
$(document).ready(function() {
$('#faqs h3').each(function() {
var tis = $(this), state = false, answer = tis.next('div').slideUp();
tis.click(function() {
state = !state;
answer.slideToggle(state);
tis.toggleClass('active',state);
});
});
});
Como ven el código Javascript también es muy simple y fácil de entender. Visitando la página de este tutorial, hay disponible otra versión para este código.
Fancy FAQs with jQuery Sliders
Visitar: davidwalsh.name/jquery-sliders