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;
}
.accordioninput.tab-toggle {
  position: absolute;
  opacity: 0;
}
.accordionlabelinput.tab-toggle:checked + .tab-title {
  background: white;
}
.accordionlabelinput.tab-toggle:checked ~ .tab {
  visibility: visible;
  opacity: 1;
}
.accordionlabel {
  float: left;
  font-size: 16px;
  line-height: 16px;
  border-radius: 3px3px00;
}
.accordionlabel:first-of-type .tab {
  border-radius: 03px3px3px;
}
.accordionlabel.tab-title {
  cursor: pointer;
  display: block;
  padding: 20px;
  border-radius: 3px3px00;
}
.accordionlabel.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><divclass="accordion"><label><inputclass="tab-toggle"type="radio"name="my_radio_group"checked/><spanclass="tab-title">Tab One</span><divclass="tab"><p>Hi. I'm tab one's content. Nice to meet you.</p></div></label><label><inputclass="tab-toggle"type="radio"name="my_radio_group" /><spanclass="tab-title">Tab Two</span><divclass="tab"><p>Hi. I'm tab two's content. Nice to meet you.</p></div></label><label><inputclass="tab-toggle"type="radio"name="my_radio_group" /><spanclass="tab-title">Tab Three</span><divclass="tab"><p>Hi. I'm tab three's content. Nice to meet you.</p></div></label><label><inputclass="tab-toggle"type="radio"name="my_radio_group" /><spanclass="tab-title">Tab Four</span><divclass="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><divclass="accordion"><label><inputclass="tab-toggle"type="radio"name="my_radio_group" /><spanclass="tab-title">Tab Five</span><divclass="tab"><p>Tab Five</p></div></label><label><inputclass="tab-toggle"type="radio"name="my_radio_group"/><spanclass="tab-title">Tab Six</span><divclass="tab"><p>Six</p></div></label><label><inputclass="tab-toggle"type="radio"name="my_radio_group" /><spanclass="tab-title">Tab Seven</span><divclass="tab"><p>Seven</p></div></label><label><inputclass="tab-toggle"type="radio"name="my_radio_group" /><spanclass="tab-title">Tab Eight</span><divclass="tab"><p>Eight</p></div></label></div>