FrontEnd Mentor Accordion Project

Community feedback

• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Congrats on completing the challenge! It looks good overall.

  However few issues to be noted, as u also pointed out some of them. This image belong to the FAQ Card and not the body or the page as a whole, so it is better to group things together that belong to each other, meaning ideally image should be inside the main tag or the container of the card and it must be positioned to absolute relative to that container (although it does not need to be absolutely positioned too, there are other alternatives).

  Also somehow i cannot open the answers nomatter where i click, it does not seem to work for me.

  0

  ---

  

  papa•340

  @PapsPythonPosted over 1 year ago

  @visualdenniss thanks for the feedback Dennis. I made the click specific to the arrow. Please click on the "how do i reset password" arrow. My attempt at using data-attributes introduced complications.

  Kindly let me know if that worked.

  0

  

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  @PapsPython Yep clicking on that arrow opens. You can also check my solution if you want to see a possible way to do it. Even tho the source code is in React, that part of the logic is vanilla JS, where on Click on the button i call handleToggle function:

  const handleToggle = (e) => {
      
      const question = e.target 
      const answer = e.target.nextSibling 
  
      if(question.classList.contains('faq-accordion-question-button-active')) {
          question.classList.remove('faq-accordion-question-button-active')
          answer.classList.remove('faq-accordion-answer-active')
      } else {
          // // reset 
          const openQuestions = document.querySelectorAll('.faq-accordion-answer-active')
          const openBtn = document.querySelectorAll('.faq-accordion-question-button-active')
          openQuestions?.forEach(item => item.classList.remove('faq-accordion-answer-active'))      
          openBtn?.forEach(btn => btn.classList.remove('faq-accordion-question-button-active'))
  
          question.classList.add('faq-accordion-question-button-active')           
          answer.classList.toggle('faq-accordion-answer-active')
      }
  }
  

  Hope this was helpful!

  0