(CSS only) Display section when wrapped input is checked - css

Question

my overall goal is to have different inputs inline which when clicked show a section. I try to rely solely on CSS in this case. Until now it worked quite good; however since the input is wrapped into several other divs the section remains not displayed even when input is checked.
I tried different approaches in CSS to overcome the wrappers around the input... none were successful.
main {
min-width: 320px;
max-width: 100%;
height: auto;
padding: 20px;
margin: 0 auto;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #f3f3f3;
}
#tab1,
#tab2,
#tab3,
#tab4 {
display: none;
}
.profile_overview {
margin-top: 2%;
width: 100%;
height: 40vh;
display: flex;
justify-content: space-between;
}
.profile_one,
.profile_two,
.profile_three,
.profile_four {
width: 22.5%;
height: 100%;
border-radius: 8px;
background-color: white;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}
.labeltab {
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
.labeltab:before {
font-weight: lighter;
margin-right: 10px;
}
.labeltab:hover {
color: white;
cursor: pointer;
}
input:checked + .labeltab {
color: white;
border: 1px solid #f3f3f3;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}
<main>
<div class="profile_overview">
<div class="profile_one">
<input id="tab1" type="radio" name="tabs" value="a" />
<label class="labeltab" for="tab1">A</label>
</div>
<div class="profile_two">
<input id="tab2" type="radio" name="tabs" value="b" />
<label class="labeltab" for="tab2">B</label>
</div>
<div class="profile_three">
<input id="tab3" type="radio" name="tabs" value="c" />
<label class="labeltab" for="tab3">C</label>
</div>
<div class="profile_four">
<input id="tab4" type="radio" name="tabs" value="d" />
<label class="labeltab" for="tab4">D</label>
</div>
</div>
<section id="content1">
<p>1</p>
</section>
<section id="content2">
<p>2</p>
</section>
<section id="content3">
<p>3</p>
</section>
<section id="content4">
<p>4</p>
</section>
</main>

Answer 1

Since there is no parent's selector in CSS, your inputs have to be ahead in the code and sibblings for the closest position.
you have well linked your labels and inputs via the id and for attributes, you need to place your input as first children inside the parent container or just ahead where your content boxes are.
Your CSS selectors will then work fine.
main {
min-width: 320px;
max-width: 100%;
height: auto;
padding: 20px;
margin: 0 auto;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #f3f3f3;
}
#tab1,
#tab2,
#tab3,
#tab4 {
display: none;
}
.profile_overview {
margin-top: 2%;
width: 100%;
height: 40vh;
display: flex;
justify-content: space-between;
}
.profile_one,
.profile_two,
.profile_three,
.profile_four {
width: 22.5%;
height: 100%;
border-radius: 8px;
background-color: white;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}
.labeltab {
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
.labeltab:before {
font-weight: lighter;
margin-right: 10px;
}
.labeltab:hover {
color: white;
cursor: pointer;
}
input:checked+.labeltab {
color: white;
border: 1px solid #f3f3f3;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4 {
display: block;
}
<main>
<!-- here is the HTML update structure to use the ::checked state to toggle display on next sibblings -->
<input id="tab1" type="radio" name="tabs" value="a" />
<input id="tab2" type="radio" name="tabs" value="b" />
<input id="tab3" type="radio" name="tabs" value="c" />
<input id="tab4" type="radio" name="tabs" value="d" />
<!-- end update -->
<div class="profile_overview">
<div class="profile_one">
<!-- input moved two level up in html tree -->
<label class="labeltab" for="tab1">A</label>
</div>
<div class="profile_two">
<!-- input moved two level up in html tree -->
<label class="labeltab" for="tab2">B</label>
</div>
<div class="profile_three">
<!-- input moved two level up in html tree -->
<label class="labeltab" for="tab3">C</label>
</div>
<div class="profile_four">
<!-- input moved two level up in html tree -->
<label class="labeltab" for="tab4">D</label>
</div>
</div>
<section id="content1">
<p>1</p>
</section>
<section id="content2">
<p>2</p>
</section>
<section id="content3">
<p>3</p>
</section>
<section id="content4">
<p>4</p>
</section>
</main>