可折叠的 div css - 需要它所以开始关闭答案

【问题标题】：collapsible div css - need it so start closed可折叠的 div css - 需要它所以开始关闭
【发布时间】：2021-04-11 11:58:08
【问题描述】：

我有一个工作正常的可折叠潜水，但是我希望它默认显示为关闭，因为当前元素在进入页面时显示。

如何更改我发现的这个 css 以使可折叠项目默认关闭？

这是css

/*
 CSS for the main interaction
*/
.accordion > input[type="checkbox"] {
  position: absolute;
  left: -100vw;
}

.accordion .content {
  overflow-y: hidden;
  height: 0;
  transition: height 0.3s ease;
}

.accordion > input[type="checkbox"]:checked ~ .content {
  height: auto;
  overflow: visible;
}

.accordion label {
  display: block;
}

  <section class="accordion">
   <input type="checkbox" name="collapse" id="handle1" checked="checked">
   <h2 class="handle">
     <label for="handle1"> text</label>
   </h2>
   <div class="content">
     <p><strong>Overall Impression:</strong> text </p>
     <p><strong>History:</strong> text</p>
   </div>
  </section>

【问题讨论】：

您好，请同时包含您的 HTML 和 JS 代码。谢谢
@John Ive 包含了 html 代码，没有任何 javascript
好的，我已经添加了答案。请看

标签： html css collapsable

【解决方案1】：

我假设您的可折叠 div 是 .accordion .content 所以您需要将以下内容作为 css 的一部分

.accordion .content {
   display:none;
}

我需要查看您的 html 和 js 代码以确定。

【讨论】：

我在主问题中添加了html代码

【解决方案2】：

<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";  } }); }
</script>

<style>
.collapsible {
  cursor: pointer;
  width: 100%;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>

&lt;button class="collapsible"&gt;Click to Expand&lt;/button&gt;

【讨论】：

在回答中按“运行代码 sn-p”时会出现错误。在堆栈片段中，您不要在 sn-p 的“Javascript”部分中包含 <script> 标记。

【解决方案3】：

您只需在 HTML 中删除 input 上的 checked="checked" 即可。

/*
 CSS for the main interaction
*/
.accordion > input[type="checkbox"] {
  position: absolute;
  left: -100vw;
}

.accordion .content {
  overflow-y: hidden;
  height: 0;
  transition: height 0.3s ease;
}

.accordion > input[type="checkbox"]:checked ~ .content {
  height: auto;
  overflow: visible;
}

.accordion label {
  display: block;
}

 
 <section class="accordion">
   <input type="checkbox" name="collapse" id="handle1">
   <h2 class="handle">
     <label for="handle1"> text</label>
   </h2>
   <div class="content">
     <p><strong>Overall Impression:</strong> text </p>
     <p><strong>History:</strong> text</p>
   </div>
  </section>

【讨论】：

【解决方案4】：

在您提供的代码中，javascript 实际上并没有做任何事情。在这里，我让您的代码使用以下 html...（我将转换时间增加到 1 秒，因此效果更加明显）。

.accordion > input[type="checkbox"] {
  position: absolute;
  left: -100vw;
}
.accordion .content {
  overflow-y: hidden;
  max-height: 0;
  transition: max-height 1s ease;
}
.accordion > input[type="checkbox"]:checked ~ .content {
  max-height: 100vh;
}
.accordion label {
  display: block;
}
.content {
  background-color: wheat;
}

<section class="accordion">
    <input type="checkbox" name="collapse" id="handle1">
    <h2 class="handle">
        <label for="handle1"> text</label>
    </h2>
    <div class="content">
        <p><strong>Overall Impression:</strong> text </p>
        <p><strong>History:</strong> text</p>
    </div>
</section>

【讨论】：