I recently started working on a FAQ accordion project from frontendmentor. The functionality works perfectly when clicking on a question to reveal the answer and clicking again to hide it. However, I am facing an issue where if I click on one question and then on another, the first question's answer doesn't automatically hide. I have been struggling to find a solution to this problem. Any assistance would be greatly appreciated. Thank you!
Live:
Repo: https://github.com/sn-tin/faq-accordion-card-main
const accordionQuestions = document.querySelectorAll(".questions");
const boxIllustration = document.querySelector(".box-illust");
accordionQuestions.forEach(questions => {
questions.addEventListener('click', function() {
this.classList.toggle("active");
const accordionAnswers = questions.nextElementSibling;
if (questions.classList.contains("active")) {
boxIllustration.classList.add("move-box")
accordionAnswers.classList.toggle("collapse-answer")
} else {
boxIllustration.classList.remove("move-box")
accordionAnswers.classList.remove("collapse-answer")
}
})
})
.faq-side {
width: 100%;
padding: 100px 100px 100px 0;
}
.faq-heading {
margin-bottom: 30px;
}
.questions {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-size: $questions-size;
color: $bold-text-color;
border: 0;
background-color: transparent;
text-align: left;
margin-bottom: 20px;
cursor: pointer;
:hover {
color: $orange-hover-text;
}
}
.arrow-down {
width: 15px;
transition: all 0.2s ease-in;
}
.faq-1, .faq-2, .faq-3, .faq-4, .faq-5 {
border-bottom: 1px solid $border-color;
margin-top: 20px;
}
.panel {
display: none;
}
answers {
color: $answers-color;
width: 95%;
margin-bottom: 30px;
}
// To add by JavaScript
.active {
color: $bold-text-color;
font-weight: $bold;
}
.active img {
transform: rotate(180deg);
transition: all 0.2s ease-in;
}
.collapse-answer {
display: block;
}
.move-box {
left: -10rem;
}
<!-- FAQs -->
<div class="faq-side">
<h1 class="faq-heading">FAQ</h1>
<div class="faqs d-flex flex-column">
<div class="faq-1">
<button class="questions q-1">
How many team members can I invite?
<img class="arrow-down" src="./images/icon-arrow-down.svg" alt="Icon arrow down">
</button>
<div class="panel">
<p class="answer-1 answers">You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.</p>
</div>
</div>
<div class="faq-2">
<button class="questions q-2">
What is the maximum file upload size?
<img class="arrow-down" src="./images/icon-arrow-down.svg" alt="Icon arrow down">
</button>
<div class="panel">
<p class="answer-2 answers">No more than 2GB. All files in your account must fit your allotted storage space.</p>
</div>
</div>
<div class="faq-3">
<button class="questions q-3">
How do I reset my password?
<img class="arrow-down" src="./images/icon-arrow-down.svg" alt="Icon arrow down">
</button>
<div class="panel">
<p class="answer-3 answers">Click “Forgot password” from the login page or “Change password” from your profile page.
A reset link will be emailed to you.</p>
</div>
</div>
<div class="faq-4">
<button class="questions q-4">
Can I cancel my subscription?
<img class="arrow-down" src="./images/icon-arrow-down.svg" alt="Icon arrow down">
</button>
<div class="panel">
<p class="answer-4 answers">Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
</div>
<div class="faq-5">
<button class="questions q-5">
Do you provide additional support?
<img class="arrow-down" src="./images/icon-arrow-down.svg" alt="Icon arrow down">
</button>
<div class="panel">
<p class="answer-5 answers">Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
</div>
</div>
</div>
</div>
<!-- End of FAQs -->