常见问题手风琴显示/隐藏

Question

I'm currently doing this FAQ beginner project and I need some help with the js code. How do I make it so that it only shows one answer at a time?

Here's the HTML/CSS: https://github.com/Huy-jpg/faq-accordion-card-main

Here's the js code:

const containerQs = document.querySelectorAll('.detail-questions'),
      answers = document.querySelectorAll('.answers');

containerQs.forEach(container => {
  container.addEventListener('click', () => {
    answers.forEach(ans => {
      if(ans.classList.contains('active')){
        ans.classList.remove('active');
      } else{
        ans.classList.add('active');
      }
    })
  })
})```

Answer 1

You are toggling the class on all .answer elements on each click.

You need to toggle it only in the next <p> element, see nextElementSibling .

I made this fiddle to demonstrate.

The updated code:

const containerQs = document.querySelectorAll('.detail-questions');

containerQs.forEach(container => {
  container.addEventListener('click', () => {
      container.nextElementSibling.classList.toggle('active');
  })
})

Answer 2

I didn't used display block inline , because I need like a duration time when opening and closing. I created a very simple accordion with a simple javascript code, I didn't focus on the css because you can put any css you want, our focus is on the javascript idea and a simple css code. use height:0; transition: all 1s linear height:0; transition: all 1s linear in css than in Javascript you can change height: 0 to the original height using scrollHeight in javascript, it gives you the main height of the element even if you in css put height: 0 . If you have any question just ask me. If you want I can edit your code with the same idea of my code.

 var opencloseques = document.getElementsByClassName("opencloseques"); for (let i = 0; i < opencloseques.length; i = i + 1) { opencloseques[i].onclick = function () { if (this.classList.contains("opened") == false) { this.parentElement.getElementsByClassName("answer")[0].style.height = this.nextElementSibling.scrollHeight + "px"; this.classList.add("opened") } else { this.parentElement.getElementsByClassName("answer")[0].style.height = "0"; this.classList.remove("opened") } } }

 .questionanswer.answer { height: 0; overflow: hidden; transition: all 0.3s linear; }

 <div class="all"> <div class="questionanswer"> <button class="opencloseques">Click Me<span class='span'>+</span></button> <div class="answer"> <p>Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it </p> </div> </div> <div class="questionanswer"> <button class="opencloseques">Click Me<span class='span'>+</span></button> <div class="answer"> <p>Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it Welcome To my website i hope you enjoy it </p> </div> </div> </div>