如何让Toggle Panel默认处于关闭状态？

要让面板默认处于关闭状态，只需调整CSS的默认样式逻辑，确保内容区域和关闭图标默认隐藏，仅在点击按钮后才显示对应元素：

具体修改步骤 #

• 默认隐藏面板内容：给.panel-contenido添加display: none的基础样式，页面加载时内容不显示
• 默认隐藏关闭图标：给.toggle-close添加display: none !important的基础样式，确保默认只显示问号图标
• 确认.panel-wrap默认不带panel-open类（你的现有HTML已经满足这一点，无需改动）

修改后的完整代码 #

JavaScript（无需修改） #

document.querySelector(".panel-toggle").addEventListener("click", () => {
  document.querySelector(".panel-wrap").classList.toggle("panel-open");
});

CSS（修改部分已标注） #

.panel-wrap {
  display: flex;
  height: 80vh;
  margin-left: -20px;
  margin-top: 10px;
  position: fixed;
  z-index: 9999;
}

.panel-toggle {
  margin-top: 150px;
  width: 50px;
  height: 90px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background-color: #225b4e;
  border-radius: 0 5px 5px 0;
  border: none;
  outline: none;
  cursor: pointer;
}

/* 新增：默认隐藏面板内容 */
.panel-contenido {
  display: none;
}

.panel-open .panel-contenido {
  display: initial;
}

.panel-open .toggle-open {
  display: none !important;
}

/* 新增：默认隐藏关闭图标 */
.toggle-close {
  display: none !important;
}

.panel-open .toggle-close {
  display: initial !important;
}

HTML（无需修改） #

<div class="panel-wrap">
  <div class="panel-contenido">
    <p class="titulo">INFORMATION</p>
    <p><span class="subtitle">Info</span> that is important.</p>
  </div>

  <button class="panel-toggle" type="button">
    <img class="toggle-open" width="30" height="30" src="https://www.svgrepo.com/show/126178/question-mark.svg" alt="?" />
    <img class="toggle-close" width="25" height="25" src="https://www.svgrepo.com/show/12848/x-symbol.svg" alt="x" />
  </button>
</div>

逻辑说明 #

通过设置.panel-contenido和.toggle-close的默认隐藏状态，只有当用户点击按钮后，.panel-wrap被添加panel-open类，CSS规则才会触发，显示面板内容和关闭图标，同时隐藏问号图标，实现默认关闭、点击切换的效果。

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