求助：无需ID实现Radio Buttons手风琴标签的可行方案

问题现状 #

想用Radio按钮实现手风琴效果，要求默认选中第一个标签、切换时关闭当前打开的标签，但现有代码存在两个问题：

• 标签文本无法正常显示
• 手风琴内容切换逻辑失效
  且受系统限制不能使用ID，也禁用了PHP/JS。

解决方案 #

通过调整HTML结构+优化CSS选择器，完全用类选择器和兄弟选择器实现需求，无需ID和脚本：

修改后的HTML代码

<center>
  <div class="acc_outer">
    <div class="acc_item">
      <input class="acc_input" type="radio" name="accordion" checked>
      <label class="acc_label">Label1</label>
      <div class="acc_txt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
    </div>

    <div class="acc_item">
      <input class="acc_input" type="radio" name="accordion">
      <label class="acc_label">Label2</label>
      <div class="acc_txt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
    </div>
  </div>
</center>

修改后的CSS代码

.acc_outer {
  height: auto;
  width: 550px;
  position: relative;
  display: inline-block;
  background-color: #f6f6f6;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #8da8a5;
}

.acc_item {
  margin-bottom: 3px;
}

.acc_input {
  /* 视觉隐藏但保持可点击 */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.acc_label {
  cursor: pointer;
  display: block;
  text-align: left;
  padding: 10px 15px;
  font-weight: 700;
  border-radius: 5px;
  background-color: #909f9d;
  color: #f6f6f6;
  font-size: 20px;
  text-shadow: 0px 0px 1px #595959;
}

.acc_label:hover {
  background-color: #a1b1ae;
}

/* 选中时的标签样式 */
.acc_input:checked + .acc_label {
  background-color: #a1b1ae;
}

.acc_txt {
  color: #595959;
  text-align: justify;
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 10px;
  transition: all 0.3s ease; /* 可选：添加过渡动画 */
}

/* 选中时显示内容 */
.acc_input:checked ~ .acc_txt {
  height: auto;
  opacity: 1;
  padding: 5px 10px;
}

关键修改说明 #

1. 调整HTML结构：将radio从label内部移到外部，与label、文本容器成为同级兄弟元素，确保CSS兄弟选择器(+/~)能正常生效
2. 视觉隐藏radio：用position:absolute + opacity:0替代display:none，既隐藏按钮又保证可点击（点击label会触发关联的radio）
3. 修正CSS选择器：
   • 用.acc_input:checked + .acc_label正确选中被激活的标签
   • 用.acc_input:checked ~ .acc_txt控制内容容器的显示/隐藏
4. 添加过渡动画：可选的transition属性让手风琴展开/收起更平滑

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