@visualdenniss
Posted
Congrats on completing the challenge! It looks good overall.
However few issues to be noted, as u also pointed out some of them. This image belong to the FAQ Card and not the body or the page as a whole, so it is better to group things together that belong to each other, meaning ideally image should be inside the main tag or the container of the card and it must be positioned to absolute relative to that container (although it does not need to be absolutely positioned too, there are other alternatives).
Also somehow i cannot open the answers nomatter where i click, it does not seem to work for me.
@PapsPython
Posted
@visualdenniss thanks for the feedback Dennis. I made the click specific to the arrow. Please click on the "how do i reset password" arrow. My attempt at using data-attributes introduced complications.
Kindly let me know if that worked.
@visualdenniss
Posted
@PapsPython Yep clicking on that arrow opens. You can also check my solution if you want to see a possible way to do it. Even tho the source code is in React, that part of the logic is vanilla JS, where on Click on the button i call handleToggle function:
const handleToggle = (e) => {
const question = e.target
const answer = e.target.nextSibling
if(question.classList.contains('faq-accordion-question-button-active')) {
question.classList.remove('faq-accordion-question-button-active')
answer.classList.remove('faq-accordion-answer-active')
} else {
// // reset
const openQuestions = document.querySelectorAll('.faq-accordion-answer-active')
const openBtn = document.querySelectorAll('.faq-accordion-question-button-active')
openQuestions?.forEach(item => item.classList.remove('faq-accordion-answer-active'))
openBtn?.forEach(btn => btn.classList.remove('faq-accordion-question-button-active'))
question.classList.add('faq-accordion-question-button-active')
answer.classList.toggle('faq-accordion-answer-active')
}
}
Hope this was helpful!
