pablodev | FAQ accordion

Community feedback

• 

  Mahmood•1,510

  @MahmoodHashemPosted 5 months ago

  Hello,

  Congratulations on successfully completing your challenge.

  Your project is impressive, with clean and cool code.

  I have some suggestions to further improve it:

  • The FAQ section should behave like an accordion, where opening one question hides the others. You can achieve this by querying all the paragraphs and using conditional logic in a foreach loop to hide or show them.

  Here is the updated version of your code, where the answer paragraphs have a class added to hide them:

  document.addEventListener("DOMContentLoaded", function() {
      const buttons = document.querySelectorAll(".toggle-button");
      const paragraphs = document.querySelectorAll(".question-answer");
  
      buttons.forEach((button, index) => {
          button.addEventListener("click", function() {
              paragraphs.forEach((p, i) => {
                  if (i === index) {
                      p.classList.toggle('hide');
                      button.src = p.classList.contains('hide')
                          ? './assets/images/icon-plus.svg'
                          : './assets/images/icon-minus.svg';
                  } else {
                      p.classList.add('hide');
                      buttons[i].src = './assets/images/icon-plus.svg';
                  }
              });
          });
      });
  });
  

  Keep up the hard work

  0