Javascript - why is my hide/show html code not working

Question

I want to be able to click on the class questionBox and hide/show the class answers, so i have created an array of classes using querySelectorAll to select questionBox classes, then loop via the arrays using for Each loop, then i created another variable each to house each questions and answers, then i attached an eventlistener function to the questions class, such that when you click on the class it hides/shows the answers

Here is a sample code

HTML

<div class="questionBox">
 <div class="questions">
  <p>How many team members can I invite?</p>
                        <!-- <div class="arrows"></div> -->
 </div>
 <div class="answers">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</div>
 </div>
 
<div class="questionBox">
 <div class="questions">
  <p>How many team members can I invite?</p>
                        <!-- <div class="arrows"></div> -->
 </div>
 <div class="answers">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</div>
 </div>
    
<div class="questionBox">
 <div class="questions">
  <p>How many team members can I invite?</p>
                        <!-- <div class="arrows"></div> -->
 </div>
 <div class="answers">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</div>
 </div>
    
<div class="questionBox">
 <div class="questions">
  <p>How many team members can I invite?</p>
                        <!-- <div class="arrows"></div> -->
 </div>
 <div class="answers">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</div>
 </div>

css
.questionBox{
    border-bottom: 1px solid black;
    padding: 10px 0;
}

.answers{
    display: none;
}

js

let toggleBox = document.querySelectorAll(".questionBox");

toggleBox.forEach(item =>{
    let x = document.querySelector(".questions");
    let y = document.querySelector(".answers");

    x.addEventListener('click', function(){
        if(y.style.display === "none"){
            y.style.display = "block"
        }
        else{
            y.style.display = "none"
        }
    })
})

Any help please

Answer 1

Your problem is that the selectors inside the loop are not related to the looped item:

 let toggleBox = document.querySelectorAll(".questionBox"); toggleBox.forEach(item =>{ let x = item.querySelector(".questions"); let y = item.querySelector(".answers"); x.addEventListener('click', function(){ if(y.style.display === "none"){ y.style.display = "block" } else{ y.style.display = "none" } }) })

 .questionBox{ border-bottom: 1px solid black; padding: 10px 0; }.answers{ display: none; }

 <div class="questionBox"> <div class="questions"> <p>How many team members can I invite?</p> <.-- <div class="arrows"></div> --> </div> <div class="answers">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan?</div> </div> <div class="questionBox"> <div class="questions"> <p>How many team members can I invite.</p> <.-- <div class="arrows"></div> --> </div> <div class="answers">You can invite up to 2 additional users on the Free plan? There is no limit on team members for the Premium plan.</div> </div> <div class="questionBox"> <div class="questions"> <p>How many team members can I invite.</p> <?-- <div class="arrows"></div> --> </div> <div class="answers">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</div> </div> <div class="questionBox"> <div class="questions"> <p>How many team members can I invite?</p> <!-- <div class="arrows"></div> --> </div> <div class="answers">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</div> </div>