Multiple Tabs In One HTML Page Without Unique Reference (no ID Or Class)

Is it possible to have multiple tabs in one HTML page without unique reference, i.e. no IDs or classes as reference for the content to be displayed when clicking the tab. The code

Solution 1:

If you insert your radio buttons inside <label> you don't have to use ids:

body {
  background: #e0e0e0;
}

* {
  transition: 0.5s ease-in-out;
  box-sizing: border-box;
}

.accordion {
  margin: 94px auto 0 auto;
  max-width: 500px;
  height: 300px;
  position: relative;
}
.accordion input.tab-toggle {
  position: absolute;
  opacity: 0;
}
.accordion label input.tab-toggle:checked + .tab-title {
  background: white;
}
.accordion label input.tab-toggle:checked ~ .tab {
  visibility: visible;
  opacity: 1;
}
.accordion label {
  float: left;
  font-size: 16px;
  line-height: 16px;
  border-radius: 3px 3px 0 0;
}
.accordion label:first-of-type .tab {
  border-radius: 0 3px 3px 3px;
}
.accordion label .tab-title {
  cursor: pointer;
  display: block;
  padding: 20px;
  border-radius: 3px 3px 0 0;
}
.accordion label .tab-title:hover {
  background: rgba(0, 0, 0, 0.1);
}
.accordion .tab {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding: 20px;
  top: 56px;
  left: 0;
  min-width: 100%;
  height: 244px;
  background: white;
  border-radius: 3px;
}

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis mi, vulputate et lorem quis, blandit pharetra metus. Donec viverra accumsan velit at ullamcorper.
</p>
<div class="accordion">
  <label>
    <input class="tab-toggle" type="radio" name="my_radio_group" checked/>
    <span class="tab-title">Tab One</span>
    <div class="tab">
      <p>Hi. I'm tab one's content. Nice to meet you.</p>
    </div>
  </label>

  <label>
    <input class="tab-toggle" type="radio" name="my_radio_group" />
    <span class="tab-title">Tab Two</span>
    <div class="tab">
      <p>Hi. I'm tab two's content. Nice to meet you.</p>
    </div>
  </label>

  <label>
    <input class="tab-toggle" type="radio" name="my_radio_group" />
    <span class="tab-title">Tab Three</span>
    <div class="tab">
      <p>Hi. I'm tab three's content. Nice to meet you.</p>
    </div>
  </label>

  <label>
    <input class="tab-toggle" type="radio" name="my_radio_group" />
    <span class="tab-title">Tab Four</span>
    <div class="tab">
      <p>Hi. I'm tab four's content. Nice to meet you.</p>
    </div>
  </label>


</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis mi, vulputate et lorem quis, blandit pharetra metus. Donec viverra accumsan velit at ullamcorper.
</p>

<div class="accordion">

  <label>
    <input class="tab-toggle" type="radio" name="my_radio_group" />
    <span class="tab-title">Tab Five</span>
    <div class="tab">
      <p>Tab Five</p>
    </div>
  </label>

  <label>
    <input class="tab-toggle" type="radio" name="my_radio_group"/>
    <span class="tab-title">Tab Six</span>
    <div class="tab">
      <p>Six</p>
    </div>
  </label>

  <label>
    <input class="tab-toggle" type="radio" name="my_radio_group" />
    <span class="tab-title">Tab Seven</span>
    <div class="tab">
      <p>Seven</p>
    </div>
  </label>

  <label>
    <input class="tab-toggle" type="radio" name="my_radio_group" />
    <span class="tab-title">Tab Eight</span>
    <div class="tab">
      <p>Eight</p>
    </div>
  </label>
</div>