如何修改纯CSS实现的collapsible DIV，为头部添加自定义内容

第一步：改造HTML头部结构 #

把原来头部的<span>标签替换为<div>，你可以在这个div内部任意添加自定义内容，比如辅助说明文字、图标、标签、操作按钮等都可以，示例结构如下：

<!-- 单个折叠面板结构 -->
<div class="collapsible-item">
  <input type="checkbox" id="tripel" class="collapsible-toggle">
  <!-- 原span替换为div头部，内部可自由添加自定义内容 -->
  <label for="tripel" class="collapsible-header">
    <div class="header-left">
      <span class="beer-name">Belgian Tripel</span>
      <span class="beer-tag">烈性艾尔</span>
      <span class="beer-abv">酒精度: 8-10%</span>
    </div>
    <div class="header-icon">▼</div>
  </label>
  <div class="collapsible-content">
    <p>比利时三料是一种传统的修道院啤酒，通常呈淡金色，泡沫丰富细腻，带有明显的水果酯香和香料气息，口感饱满醇厚。</p>
  </div>
</div>

第二步：调整CSS适配新结构 #

把原来针对span的选择器改成针对div的，同时增加头部布局的相关样式，确保自定义内容可以正常排版，完整CSS示例如下：

/* 隐藏原生checkbox触发控件 */
.collapsible-toggle {
  display: none;
}
/* 头部样式，替换原span的对应样式 */
.collapsible-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}
/* 头部左侧内容排版，可根据需求自行调整布局 */
.header-left {
  display: flex;
  gap: 16px;
  align-items: center;
}
.beer-name {
  font-size: 16px;
  font-weight: 600;
}
.beer-tag {
  padding: 2px 6px;
  background: #e3f2fd;
  color: #1976d2;
  border-radius: 4px;
  font-size: 12px;
}
.beer-abv {
  font-size: 14px;
  color: #666;
}
/* 箭头图标切换动画 */
.header-icon {
  transition: transform 0.2s ease;
}
/* 折叠状态内容隐藏 */
.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 16px;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0 0 4px 4px;
}
/* 展开状态样式控制 */
.collapsible-toggle:checked ~ .collapsible-header .header-icon {
  transform: rotate(180deg);
}
.collapsible-toggle:checked ~ .collapsible-content {
  max-height: 200px; /* 可根据实际内容高度调整阈值 */
  padding: 12px 16px;
}

核心调整说明 #

• 原来绑定在span上的点击、样式逻辑都可以直接平移到div上，纯CSS折叠的核心逻辑（通过checkbox状态控制兄弟元素样式）完全不需要改动
• 头部div内部可以用flex、grid等任意布局方式排版自定义内容，不会影响折叠功能
• 如果你原来用的是<details>元素实现的折叠，只需要把<summary>标签内部的span换成div即可，调整逻辑完全一致

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