FAQ accordion card

Community feedback

• 

  Nelson•2,390

  @nelsonleonePosted almost 2 years ago

  HELLO......congrats on completing this challenge, well done🎊 🎊 I have some tips on how you can write neater and less code , you can improve your solution , or work better on the next one.

  The Faq , can be done using the <dl><dt>``<dd> tags for accessibility purposes.

  Based on your solution(how you did it) You can use buttons to create the questions, the arrow doesn't need to be the toggle , it's just for design purposes mainly or to show the faq article state

  Then use a loop to display what you want to display.

  const questions =  document.queryselectorAll('.question')
  const answers = document.querySelectorAll('.answers')
  questions.forEach((question,index) ,() => {
    question.addEventlister('click',() => {
      answer[index].style.display ="block"
    }
  })
  

  The index simply means the index in which the button(question causing the click event is) the answer in that same index should do your task

  As for the arrow , you can create a class that has tranform :rotate(180deg) The in that clicked event target the arrow in the same index and give it that className

  Hope this comment was helpful and made meaning to you Have fun coding

  Marked as helpful

  0