FAQ Accordion using Html, Css and Javascript

Community feedback

• 

  ogundiran damilola•210

  @Ogshabzy23101Posted 10 months ago

  i will suggest you add eventlistener to each button and target the granparent element of each button, then toggle the class list of hidden. then also check under the button event listener if each granparent equals to the current granparent, if it does then remove the hidden class

  const quesContainer = document.querySelectorAll('.ques-container')

  const btns = document.querySelectorAll('.btn')

  btns.forEach(function (btn) {

  btn.addEventListener('click', function (e) {

  const question = e.currentTarget.parentElement.parentElement

  quesContainer.forEach(function (newQuestion) { if (newQuestion !== question) { newQuestion.classList.remove('show-text')

  } })

  question.classList.toggle('show-text')

  })

  })

  i hope the is helpful, please rate my suggestion. thanks

  Marked as helpful

  0