FAQ accordion

Community feedback

• 

  Kimo Spark•2,190

  @kimodev1990Posted 10 months ago

  Really great work in completing the challenge, As for smooth transitions as the way I did it :

  • It's better for active tag to be flex.
  • Wrap the <p> tag which contains the the answer under Div and assign a class for it for example called .answer-container .
  • In CSS

  .answer-container {
      max-height: 110px;
      transition: max-height 0.5s;
      overflow: hidden;
  }
  

  and will add new class next to previous class :

  .answer-Text {
      max-height: 0px;
  }
  

  • In Javascript :

  var toggleButton = document.getElementsByClassName("Class you've assigned to the button image");
  for (let i = 0; i < toggleButton.length; i++) {
    toggleButton[i].addEventListener("click", () => {
      var answer = document.getElementsByClassName("answer-container");
  
      if (answer[i].classList.contains("answerText") === true) {
        answer[i].classList.remove("answer-Text");
      } else {
        answer[i].classList.add("answer-Text");
      }
  }
  

  Any Questions, Don't hesitate to ask.

  Hope you find this Helpful.

  Other than that, Nice work & Keep on the great work.

  0