En este artículo, hemos creado un acordeón de Preguntas frecuentes (FAQ) utilizando JavaScript . El acordeón se utiliza para mostrar el contenido en formato de lista. Puede expandirse o contraerse para mostrar el contenido que contiene.
Acercarse:
- Cree una etiqueta div HTML anidada con nombres de clase que contengan las preguntas y respuestas.
- Para diseñar, agregue algunas propiedades CSS como alineación, tamaño de fuente, relleno, margen, etc.
- Usando JavaScript, implemente funciones que muestren la respuesta o el elemento de acordeón cuando se hace clic en la pregunta.
Código HTML: Hemos utilizado clases para preguntas y respuestas. Estas clases se utilizan con fines de estilo.
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> <script src="main.js"></script> </head> <body> <h2 style="color:green; text-align:center"> GeeksforGeeks </h2> <div class="layout"> <div class="accordion"> <div class="accordion__question"> <p>Where is Taj Mahal located?</p> </div> <div class="accordion__answer"> <p>Taj Mahal is located in Agra, Uttar Pradesh.</p> </div> </div> <div class="accordion"> <div class="accordion__question"> <p>How many planets are there in solar system?</p> </div> <div class="accordion__answer"> <p> There are eight planets in solar system. Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, and Neptune. </p> </div> </div> </div> </body> </html>
Código CSS: para el estilo, hemos utilizado las propiedades CSS.
style.css
body {
background-color: rgb(153, 218, 196);
}
.layout {
width: 600px;
margin: auto;
}
.accordion {
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
background: rgb(105, 206, 105);
border-radius: 10px;
}
.accordion__question p {
margin: 5px;
padding: 0;
font-family: Verdana;
font-size: 20px;
}
.accordion__answer p {
margin: 5px;
padding: 10px;
font-size: large;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: rgb(255, 255, 255);
background: rgb(82, 170, 122);
border-radius: 10px;
}
.accordion:hover {
cursor: pointer;
}
.accordion__answer {
display: none;
}
.accordion.active .accordion__answer {
display: block;
}
Nota: También podemos crear otro archivo para diseñar o podemos agregarlos en el mismo archivo HTML bajo la etiqueta de estilo.
Código JavaScript: Usaremos JavaScript para mostrar el acordeón cuando se haga clic en él. Hemos utilizado el método querySelectorAll() para devolver una colección de elementos que coinciden con el nombre de clase pasado a este método y almacenar estos elementos en respuestas variables.
Hemos usado un método forEach() para llamar a la función sobre cada elemento en la variable de respuesta . Ahora, especifique un detector de eventos addEventListener() , cuando se haga clic en el elemento. Comprobará si el evento tiene una clase activa utilizando la propiedad classList que devuelve los nombres de todas las clases asociadas con ese elemento o evento.
Si tiene la clase activa, eso significa que está mostrando la respuesta o acordeón está en un estado expandido, entonces eliminaremos la clase activa de ese evento para ocultar el contenido. Si no tiene una clase activa, eso significa que el acordeón está colapsado, entonces agregaremos una clase activa.
main.js
let answers = document.querySelectorAll(".accordion");
answers.forEach((event) => {
event.addEventListener("click", () => {
if (event.classList.contains("active")) {
event.classList.remove("active");
} else {
event.classList.add("active");
}
});
});
Código completo: en esta sección, combinaremos todos los códigos para crear las preguntas frecuentes
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>FAQ</title>
<style>
body{
background-color: rgb(153, 218, 196);
}
.layout{
width: 600px;
margin: auto;
}
.accordion{
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
background: rgb(105, 206, 105);
border-radius: 10px;
}
.accordion__question p{
margin: 5px;
padding: 0;
font-family: Verdana;
font-size: 20px;
}
.accordion__answer p{
margin: 5px;
padding: 10px;
font-size: large;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: rgb(255, 255, 255);
background: rgb(82, 170, 122);
border-radius: 10px;
}
.accordion:hover{
cursor: pointer;
}
.accordion__answer {
display: none;
}
.accordion.active .accordion__answer {
display: block;
}
</style>
</head>
<body>
<h2 style="color:green; text-align:center">GeeksforGeeks</h2>
<div class="layout">
<div class="accordion">
<div class="accordion__question">
<p>Where is Taj Mahal located?</p>
</div>
<div class="accordion__answer">
<p>Taj Mahal is located in Agra, Uttar Pradesh.</p>
</div>
</div>
<div class="accordion">
<div class="accordion__question">
<p>How many planets are there in solar system?</p>
</div>
<div class="accordion__answer">
<p>
There are eight planets in solar system.
Mercury, Venus, Earth, Mars, Jupiter, Saturn,
Uranus, and Neptune.
</p>
</div>
</div>
</div>
<script>
let answers=document.querySelectorAll(".accordion");
answers.forEach((event)=>{
event.addEventListener('click',()=>{
if(event.classList.contains("active")){
event.classList.remove("active");
}
else{
event.classList.add("active");
}
})
})
</script>
</body>
</html>
Producción:
función de preguntas frecuentes
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA