常见问题（FAQ）手风琴展示/隐藏

下面是一个使用HTML、CSS和JavaScript实现“常见问题（FAQ）手风琴展示/隐藏”的解决方法：

HTML代码：

<div class="faq-container">
  <div class="faq">
    <div class="question">问题1</div>
    <div class="answer">答案1</div>
  </div>
  <div class="faq">
    <div class="question">问题2</div>
    <div class="answer">答案2</div>
  </div>
  <div class="faq">
    <div class="question">问题3</div>
    <div class="answer">答案3</div>
  </div>
</div>

CSS代码：

.faq-container {
  width: 300px;
}

.faq {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.question {
  background-color: #f5f5f5;
  padding: 10px;
  cursor: pointer;
}

.answer {
  display: none;
  padding: 10px;
}

JavaScript代码：

const questions = document.querySelectorAll(".question");

questions.forEach((question) => {
  question.addEventListener("click", () => {
    // 切换问题的展开/隐藏状态
    question.classList.toggle("active");
    
    // 获取与问题关联的答案元素
    const answer = question.nextElementSibling;
    
    if (question.classList.contains("active")) {
      answer.style.display = "block"; // 展开答案
    } else {
      answer.style.display = "none"; // 隐藏答案
    }
  });
});

通过上述代码，当用户点击问题时，与问题关联的答案会展开或隐藏。每个问题的答案默认是隐藏的，点击问题会切换展开/隐藏状态。