如何在JavaScript中隐藏手风琴面板？页面加载时默认隐藏首个面板

你只需要修改JavaScript里的初始隐藏逻辑，去掉排除第一个回答的限制，直接隐藏所有回答面板即可：

// 隐藏所有回答面板，包括第一个
$("#faq_slide .answer").hide();
$("#faq_slide .question").click(function() {
  if ($(this).next(".answer").is(":visible")) {
    $(this).next(".answer").slideUp(300);
  } else {
    $(this).next(".answer").slideDown(300).siblings(".answer").slideUp(300);
  }
});

修改说明 #

原来的代码$("#faq_slide .answer").not(":first").hide();会保留第一个回答面板显示，去掉.not(":first")后，所有回答在页面加载时都会被隐藏，和你需要的效果一致。点击逻辑不需要改动，依然保持：

• 点击已展开的问题，收起对应的回答
• 点击未展开的问题，展开对应的回答并收起其他所有回答

完整的代码示例如下：

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<div id="faq_slide">
  <div class="question">First Question</div>
  <div class="answer">Lorem ipsum dolor sit amet.</div>
  <div class="question">Second Question</div>
  <div class="answer">Lorem ipsum dolor sit amet.</div>
  <div class="question">Third Question</div>
  <div class="answer">Lorem ipsum dolor sit amet.</div>
</div>

CSS

body {
  font-family: "Inter", sans-serif;
  padding: 20px;
}

.question {
  color: #555;
  padding: 15px;
  font-weight: 700;
  font-size: 16px;
  border: 1px solid #ccc;
  background: #efefef;
}

.question:hover {
  cursor: pointer;
}

.answer {
  color: #777;
  padding: 15px;
  font-weight: 400;
  font-size: 13px;
  border: 1px solid #ccc;
  border-top: none;
}

内容的提问来源于stack exchange，提问作者phil