La sección de Preguntas frecuentes (FAQ) es una de las secciones más importantes de cualquier sitio web, especialmente si está brindando servicios. Si quieres aprender a hacerlo tú mismo, ¡bienvenido! hoy aprenderemos cómo crear una página de preguntas frecuentes usando JavaScript.
Funcionalidades requeridas en una página de preguntas frecuentes:
- Inicialmente, solo se muestran las preguntas donde cada pregunta está separada por una línea.
- Al hacer clic en el ícono más, la sección de respuesta se expande y se muestra una respuesta a una pregunta en particular.
- Cuando se hace clic en un ícono más y se muestra una sección de respuesta, un ícono de cruz reemplaza al ícono más.
- Cuando se hace clic en el ícono de una cruz, la sección de respuesta colapsa y el ícono de la cruz se reemplaza nuevamente por un ícono más.
HTML y CSS se encargarán de la interfaz de usuario y JavaScript nos ayudará a lograr las funcionalidades anteriores, así que comencemos.
HTML: puede usar diferentes etiquetas HTML para crear el esqueleto de su página, aquí ha usado la lista desordenada para crear un esqueleto de página.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity= "sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"/> <link rel="stylesheet" href="styles.css"/> </head> <body> <div class="container"> <h1>FAQs</h1> <ul> <li class="faq"> <div class="question"> Which is the best portal to study Computer Science? <span class="icon-main"> <i class="fa-solid fa-plus"></i> </span> </div> <div class="answer non-active"> GeeksforGeeks is the best Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. </div> </li> <li class="faq"> <div class="question"> What is a FAQ section? <span class="icon-main"> <i class="fa-solid fa-plus"></i> </span> </div> <p class="answer non-active">the Frequently Asked Questions (FAQ) section is a part of your website where you address common concerns, questions, and objections that customers have. </p> </li> <li class="faq"> <div class="question"> What should be included in a FAQ section? <span class="icon-main"> <i class="fa-solid fa-plus"></i> </span> </div> <p class="answer non-active"> Fully answer the question, don't just link to a different page. </p> </li> </ul> </div> <script src="script.js"></script> </body> </html>
Nota: aquí hemos utilizado iconos de FontAwesome para iconos y fuentes de Google para nuevos estilos de fuente.
CSS
@import url(
"https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Slab&family=Spartan:wght@400;700&display=swap");
.container {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -20%);
width: 60%;
}
h1 {
text-align: center;
font-family: "Roboto Slab", serif;
font-size: 40px;
}
li {
list-style: none;
margin-bottom: 10px;
padding: 15px;
border-bottom: 2px solid #6d6b6b;
}
.question {
font-family: "Spartan", sans-serif;
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
position: relative;
color: #5c5a5a;
}
.icon-main {
position: absolute;
right: 0px;
cursor: pointer;
}
.non-active {
display: none;
}
.answer{
font-size: 17px;
font-family: "Spartan", sans-serif;
}
Aquí, una clase «no activa» ha asignado una visualización de propiedad CSS: none, que es responsable de expandir y contraer la sección de respuesta.
JavaScript:
Javascript
const faqs = document.querySelectorAll(".faq");
for (const item of faqs) {
const curr_faq = item.childNodes;
const question = curr_faq[1];
const answer = curr_faq[3];
const icon = question.querySelector(".icon-main");
icon.addEventListener("click", function () {
answer.classList.toggle("non-active");
const i = icon.querySelector("i");
i.classList.toggle("fa-xmark");
i.classList.toggle("fa-plus");
console.log(i);
});
}
Acercarse:
- Las preguntas frecuentes variables contienen una array de todos los elementos <li> que depende de la cantidad de preguntas en una página de preguntas frecuentes. Dado que queremos que cada par de preguntas y respuestas posea las mismas funcionalidades, tenemos que recorrer esta array de preguntas frecuentes y agregar las siguientes propiedades a cada elemento li.
- Dado que estamos recorriendo los elementos li y los divs de preguntas y respuestas son el elemento secundario, para extraerlos podemos usar la propiedad childNodes que devuelve una array, y debajo está su contenido.
- Dado que solo estamos interesados en div.question y div.answer, extraemos el primer y el tercer elemento de la array curr_faq.
- También puede extraer los elementos secundarios del elemento principal utilizando el método querySelector en el elemento principal que también usamos para obtener el elemento icono.
- Si el elemento de respuesta contiene una clase no activa (lo que significa que actualmente la sección de respuesta está colapsada), elimínelo cuando se haga clic en el ícono más. De manera similar, si el elemento de respuesta no contiene la clase no activa (lo que significa que actualmente la sección de respuesta está expandida), agréguelo cuando se haga clic en el icono de cruz.
- Puede usar los métodos classList.add() y classList.remove() para eliminar y agregar una clase no activa que nos proporciona funciones de expansión y contracción sobre un elemento de respuesta. Pero prefiero usar el método classList.toggle() que funciona en conjunto para nosotros y reduce algunas líneas de código.
- Además, agregue y elimine las clases fa-plus y fa-xmark cuando sea necesario para alternar entre los íconos más y cruz.
¡Viva! nuestra página de preguntas frecuentes está lista. Combinemos nuestro código HTML, CSS y Javascript para ver cómo se ve nuestra página.
Código definitivo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity=
"sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
@import url(
"https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Slab&family=Spartan:wght@400;700&display=swap");
.container {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -20%);
width: 60%;
}
h1 {
text-align: center;
font-family: "Roboto Slab", serif;
font-size: 40px;
}
li {
list-style: none;
margin-bottom: 10px;
padding: 15px;
border-bottom: 2px solid #6d6b6b;
}
.question {
font-family: "Spartan", sans-serif;
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
position: relative;
color: #5c5a5a;
}
.icon-main {
position: absolute;
right: 0px;
cursor: pointer;
}
.non-active {
display: none;
}
.answer {
font-size: 17px;
font-family: "Spartan", sans-serif;
}
</style>
<title>FAQs</title>
</head>
<body>
<div class="container">
<h1>FAQs</h1>
<ul>
<li class="faq">
<div class="question">
Which is the best portal to study
Computer Science?
<span class="icon-main">
<i class="fa-solid fa-plus"></i>
</span>
</div>
<div class="answer non-active">
GeeksforGeeks is the best Computer
Science portal for geeks. It contains
well written, well thought and well
explained computer science and
programming articles.
</div>
</li>
<li class="faq">
<div class="question">
What is a FAQ section?
<span class="icon-main">
<i class="fa-solid fa-plus"></i>
</span>
</div>
<p class="answer non-active">
the Frequently Asked Questions (FAQ)
section is a part of your website
where you address common concerns,
questions,and objections that
customers have.
</p>
</li>
<li class="faq">
<div class="question">
What should be included in a FAQ section?
<span class="icon-main">
<i class="fa-solid fa-plus"></i>
</span>
</div>
<p class="answer non-active">
Fully answer the question, don't
just link to a different page.
</p>
</li>
</ul>
</div>
<script>
const faqs = document.querySelectorAll(".faq");
for (const item of faqs) {
const curr_faq = item.childNodes;
console.log(curr_faq);
const question = curr_faq[1];
const answer = curr_faq[3];
const icon = question.querySelector(".icon-main");
icon.addEventListener("click", function () {
answer.classList.toggle("non-active");
const i = icon.querySelector("i");
i.classList.toggle("fa-xmark");
i.classList.toggle("fa-plus");
});
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por himanshusharma11199 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA