Radio Buttons for Accordion Tabs with no ID

Question

My goal was to create accordion tabs using radio buttons. The first tab is checked by default, opening another tab closes the one currently checked, and so on... However, my code does not work. I can check the buttons but no text is shown.

I know that an ID could fix that but I cannot work with IDs in my system as I need to replicate the code. php/js are blocked on my page.

Is there some workaround to get the code running without IDs?

.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

The selection for when an input is checked is incorrect.

What this snippet does is look for when the label contains an input that is checked and then it displays the sibling text (NB sibling to the label, not sibling to .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>