Toggle div content after a radio button is checked using CSS only - html

Question

It is work when the radio buttons are same div level with "content1" and "content2",
How to make it work, if I put radio button to another div that outside the div "second"
suppose that the toggle1 is checked then content1 will show up
(using CSS and HTML ONLY, no javascript)
.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>

Answer 1

When using the general sibling combinator ~, the two elements must be "children of the same parent element." Given your existing code, apply the "grid-container" class to the <div> that is a sibling of the <input> elements.
.content1,
.content2 {
display: none;
}
.toggle1:checked ~ .grid-container .content1,
.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 class="grid-container">
<div>
<div class="second">
<div class="tab content1">Content1</div>
<div class="tab content2">Content2</div>
</div>
</div>
</div>
</div>
</div>