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

Question

我是前导的FAQ手风琴项目。当我点击问题来显示答案时，一切都很棒，然后再点击它来隐藏。但是，我想做的是，如果我点击一个问题，然后点击另一个问题，我首先点击的问题应该会自动隐藏它的答案。我似乎想不出解决这个问题的办法。请帮帮忙。提前感谢你的帮助。

现场直播：https://faq-accordion-card-main-sn-tin.vercel.app/

存储库：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

只需添加一段代码，从单击处理程序中的所有问题中删除“活动”类。

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

完整的js部分是：

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")
    }
  })
})