When the radio buttons are on the same div level as "content1" and "content2", it works properly. But how can I make it work if I move the radio buttons to another div outside of the "second" div?
For example, if toggle1 is checked then content1 should be displayed.
.content1 {
display: none;
}
.content2 {
display: none;
}
.toggle1:checked ~ .grid-container .content1 {
display: block;
}
.toggle2:checked ~ .grid-container .content2 {
display: block;
}<div class="level1">
<div class="level2">
<input type=radio id="toggle1" name="toggle" class="toggle1">
<label for="toggle1">toggle1</label>
<input type=radio id="toggle2" name="toggle" class="toggle2">
<label for="toggle2">toggle2</label>
<div>
<div>
<div class="second">
<div class="tab content1">Content1</div>
<div class="tab content2">Content2</div>
</div>