无 ID 的手风琴选项卡的单选按钮

Question

我的目标是使用单选按钮创建手风琴选项卡。默认情况下会选中第一个选项卡，打开另一个选项卡会关闭当前选中的选项卡，依此类推... 但是，我的代码不起作用。我可以检查按钮，但没有显示任何文本。

我知道 ID 可以解决这个问题，但我无法在系统中使用 ID，因为我需要复制代码。 php/js 在我的页面上被屏蔽了。

是否有一些解决方法可以让代码在没有 ID 的情况下运行？

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

.acc_label {
  cursor: pointer;
  display: block;
  text-align: left;
  padding: 10px 15px;
  font-weight: 700;
  border-radius: 5px;
  margin-bottom: 3px;
  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_input {
  display: none;
}*/

.acc_txt {
  color: #595959;
  text-align: justify;
  height: 0;
  overflow: hidden;
  position: relative;
  opacity: 0;
  padding: 5px 10px;
}

.acc_outer .acc_input:checked~.acc_txt {
  height: auto;
  opacity: 1;
}

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

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

  </div>
</center>

Answer 1

检查输入时的选择不正确。

此代码片段的作用是在标签包含已检查的输入时进行查找，然后显示同级文本（注意是标签的同级文本，而不是 .outer 的同级文本）。

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

.acc_label {
  cursor: pointer;
  display: block;
  text-align: left;
  padding: 10px 15px;
  font-weight: 700;
  border-radius: 5px;
  margin-bottom: 3px;
  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_input {
  display: none;
}*/

.acc_txt {
  color: #595959;
  text-align: justify;
  height: 0;
  overflow: hidden;
  position: relative;
  opacity: 0;
  padding: 5px 10px;
}

.acc_label:has(.acc_input:checked)~.acc_txt {
  height: auto;
  opacity: 1;
}

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

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

  </div>
</center>