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

Community feedback

• 

  P

  Daniel 🛸•44,740

  @danielmrz-dev

  Posted over 1 year 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!

  01

  Marked as helpful