0

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)    
            });
        })

        })
    }

1 respuesta 1

1

Es normal que se te abran todas las respuestas, se debe a los bucles answers.forEach y con los iconos ues lo mismo, en este caso arrow.forEach.
Solo tienes que actuar en el bucle. Elimina los bucles y haz que se activen solo las respuesta de la pregunta pulsada:

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)
        //muestra la respuesta de esta pregunta 
        e.currentTarget.querySelector('.content').classList.toggle('activa');
        //muestra el icono de esta pregunta
        e.currentTarget.querySelector('.arrow').classList.toggle('activo');


    })
}

Con este cambio te funcionará.
No obstante fíjate que puedes lograrlo sin las sentencias que te marco en los comentarios (/*/Muestra ...). Lo puedes lograr definido las reglas CSS de esta forma

.question-container.active .content
{
margin-top: 10px;
max-height: 50px;
}

Ahora cuando actives la clase active en la pregunta la respuesta (clase .content) se mostrará automáticamente, sin tocarlo. Igual con el icono, solo que en lugar de .content pones .arrow y la definición correspondiente.

1
  • Ohh ya entiendo que estaba haciendo mal!! lo tendré en cuenta para la próxima. Mil gracias Commented el 25 oct. 2021 a las 1:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.