实现向上展开的HTML/CSS折叠组件技术求助

嘿，我完全get到你的需求啦——点击「MORE INFO」按钮后，内容要向上展开而不是默认的向下。咱们来调整一下代码，轻松实现这个效果：

修改后的完整代码 #

.wrap-collabsible {
  margin: 1.2rem 0;
  position: relative; /* 作为内容块的定位父容器 */
}

input[type='checkbox'] {
  display: none;
}

.lbl-toggle {
  display: block;
  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  color: #A77B0E;
  background: #FAE042;
  cursor: pointer;
  border-radius: 7px;
  position: relative;
  z-index: 1; /* 确保按钮始终在内容上方，不被遮挡 */
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out; /* 平滑展开/收起动画 */
  position: absolute;
  bottom: 100%; /* 把内容定位到按钮的正上方 */
  left: 0;
  right: 0;
  margin-bottom: 0.5rem; /* 和按钮之间留一点间距，更美观 */
  background: #ffffff; /* 添加背景色，避免和下方内容重叠 */
  padding: 0 1rem; /* 收起时只左右留白，无上下内边距 */
}

/* 点击按钮后展开内容的样式 */
.toggle:checked ~ .collapsible-content {
  max-height: 100vh; /* 足够大的值，确保内容完全展开 */
  padding: 1rem; /* 展开后添加上下内边距，提升阅读体验 */
}

<div class="wrap-collabsible">
  <input id="collapsible" class="toggle" type="checkbox">
  <!-- 把内容块移到按钮前面，这样展开时会在按钮上方显示 -->
  <div class="collapsible-content">
    <div class="content-inner">
      <p> QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without plug-ins. Test-Driven Development. </p>
    </div>
  </div>
  <label for="collapsible" class="lbl-toggle">More Info</label>
</div>

关键修改点说明 #

• 调整HTML结构：把内容块移到按钮标签的前面，这是实现向上展开的基础
• 定位设置：给外层容器添加position: relative，内容块设置position: absolute和bottom: 100%，让内容默认停靠在按钮上方
• 层级与动画：给按钮加z-index: 1避免被内容遮挡，同时添加transition实现平滑的展开/收起动画
• 细节优化：调整内容块的内边距，收起时避免多余空白，展开时保证内容有合适的留白

这样修改后，点击按钮就能看到内容向上展开在按钮上方的效果啦，完全符合你的预期～

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