FAQ 手风琴在单击另一个元素时自动隐藏单击的元素

Question

I'm doing this FAQ accordion project from frontendmentor. Everything is great when I click on the questions to show the answer, then click on it again to hide. But, what I'm trying to do is; if I click on a question, then click on another question, the question I first clicked should automatically hide its answer. I can't seem to figure out a solution to this. Please help. Thank you in advance for helping.

Live: https://faq-accordion-card-main-sn-tin.vercel.app/

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 -->

Answer 1

Just add a code that removes 'active' class from all questions in your click handler.

accordionQuestions.forEach(itm => itm.classList.remove("active"));

the full js part is:

const accordionQuestions = document.querySelectorAll(".questions");
const boxIllustration = document.querySelector(".box-illust");

accordionQuestions.forEach(questions => {
  questions.addEventListener('click', function() {
  
    accordionQuestions.forEach(itm => itm.classList.remove("active"));
    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")
    }
  })
})