Estoy haciendo una sección de preguntas sencilla con html, css y js. Lo que quiero hacer es que al presionar una pregunta se muestre su respuesta y un ícono se gire. Igualmente si clickeo el ícono se muestra la pregunta. El problema que tengo es que al dar un click en un pregunta se me muestran todas las respuestas y al dar click una vez más se ocultan.
Aquí está el código html:
<div class="questions">
<h1>FAQ</h1>
<!-- Accordion -->
<div class="questions-container " id="categorias">
<div class="question-container ">
<div class="label"><span class="question" data-categoria="members" id="prueba">How many team members can I invite? <img class="arrow" src="images/icon-arrow-down.svg" alt=""> </p></div>
<div class="content">
<p class="answer" data-categoria="members" id="info">You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.</p>
</div>
<!-- <div class="panel"> -->
<!-- </div> -->
</div>
<div class="question-container">
<div class="label"> <span class="question" data-categoria="size">What is the maximum file upload size? <img class="arrow" src="images/icon-arrow-down.svg" alt=""> </p></div>
<div class="content">
<p class="answer" data-categoria="size">No more than 2GB. All files in your account must fit your allotted storage space.</p>
</div>
</div>
<div class="question-container">
<div class="label"> <span class="question" data-categoria="password">How do I reset my password? <img class="arrow" src="images/icon-arrow-down.svg" alt=""> </p></div>
<div class="content">
<p class="answer" data-categoria="password">Click “Forgot password” from the login page or “Change password” from your profile page.
A reset link will be emailed to you.</p>
</div>
</div>
<div class="question-container">
<div class="label"><span class="question" data-categoria="subscription">Can I cancel my subscription? <img class="arrow" src="images/icon-arrow-down.svg" alt=""> </p></div>
<div class="content">
<p class="answer" data-categoria="subscription">Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
</div>
<div class="question-container" >
<div class="label"><span class="question" data-categoria="support">Do you provide additional support? <img class="arrow" src="images/icon-arrow-down.svg" alt=""> </p></div>
<div class="content">
<p class="answer" data-categoria="support">Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
</div>
</div>
</div>
Para hacer aparecer y desaparecer el texto uso un max-height
en el contenedor y cuando está activo:
.content {
color: rgb(177, 172, 172);
max-height: 0;
text-align: justify;
overflow: hidden;
transition: .3s ease-in all;
font-size: 12px;
height: 40px;
}
.activa {
margin-top: 10px;
max-height: 50px;
}
Aquí está el código js:
const preguntas = document.getElementsByClassName('question-container');
const arrow = document.querySelectorAll('.question .arrow');
const answers = document.querySelectorAll('.content');
for(var i=0; i<preguntas.length; i++){
preguntas[i].addEventListener('click', (e) => {
e.currentTarget.classList.toggle('active');
console.log(preguntas)
answers.forEach((elemento)=>{
elemento.classList.toggle('activa')
console.log(elemento.classList)
});
arrow.forEach((arr)=>{
arr.addEventListener('click', () => {
arr.classList.toggle('activo')
console.log(arr.classList)
});
})
})
}