@danielmrz-dev
Posted
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: noneanddisplay: block. I usedheight: 0andheight: 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
@ozkrTr
Posted
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.
