FAQ accordion main using HTML, CSS, and a bit of JavaScript.

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @ozkrTr!

  Your project looks great!

  I noticed that if you click on a question that's showing its answer, it doesn't close until you click on another question.

  I had the same problem but mine worked with this js function:

  function mostrar(pergunta, check, source, height) {
      if (checkbox[check].checked) {
          imagens[pergunta].src = source;
          answers[pergunta].style.height = height;
      } else {
          imagens[pergunta].src = 'assets/images/icon-plus.svg';
          answers[pergunta].style.height = '0';  
      }
  }
  

  What this funtion does is:

  • If the question is closed, it opens when you click. And if your question is open, it closes when you click. But I didn't use display: none and display: block. I used height: 0 and height: 90px. It has the same effect, because if the height is 0, the answer does not appear.

  I'm still a JavaScript student, but that worked really fine for me. If you want to take a look at my solution, here it is > link.

  I hope it helps!

  Other than this little detail, you did an excelent job!

  Marked as helpful

  0

  ---

  

  Oscar Torres•150

  @ozkrTrPosted 11 months ago

  thank you @danielmrz-dev for your comment, I took the opportunity to reassess the functionality through JavaScript. I reviewed your solution, and I found it very creative. I liked the animation in your project; unfortunately, I couldn't animate it because I used <details> to meet the requirement of navigating the questions and hiding/showing answers using keyboard navigation alone. However, I was able to correct the code to implement your suggestion.

  1