Css :checked showing containers that shold be hidden - html

Question

I am trying to do simple Tabs on my page, so I have 3 tabs and 3 sections for them. Problem is that in first section i can see all sections containers, in second 2 last and in this last. And it should be simple one section for one tab.
What am i missing?
My html and code https://codepen.io/wojsza/pen/XWMOXXm :
.display__tabs {
display: flex;
flex-wrap: wrap; }
.display__tabs--tab {
display: none; }
.display__tabs--tab:checked ~ .display__tabs--label ~ .display__tabs--content {
display: block; }
.display__tabs--label {
cursor: pointer;
padding: 25px;
color: #2e2e2e; }
.display__tabs--label:hover {
color: #aeaeae;
background-color: #2e2e2e;
font-weight: bold;
text-decoration: underline; }
.display__tabs--content {
width: 100%;
padding: 20px;
order: 1;
display: none; }
and html:
<div class="display__tabs">
<input type="radio" class="display__tabs--tab" id="display-module-info" name="module" checked="checked" />
<label class="display__tabs--label" for="display-module-info">Info</label>
<div class="display__tabs--content">
<p>Module</p>
</div>
<input type="radio" class="display__tabs--tab" id="display-module-wsu" name="module" />
<label for="display-module-wsu" class="display__tabs--label">Wsu</label>
<div class="display__tabs--content">
<p>
WSU
</p>
</div>
<input type="radio" class="display__tabs--tab" id="display-module-sections" name="module" />
<label for="display-module-sections" class="display__tabs--label">Sections</label>
<div class="display__tabs--content">
<p>
SECTION
</p>
</div>
</div>

Answer 1

You nearly there! Just need to change the "~" into "+".
You wanna change your css on this part :
From
.display__tabs--tab:checked ~ .display__tabs--label ~ .display__tabs--content {
display: block;
}
To
.display__tabs--tab:checked + .display__tabs--label + .display__tabs--content {
display: block;
}
This caused by the css selector of ~ which select the general sibling, and you wanted to use +, because the radio element that being set to hidden and block, is adjacent sibling. Reference https://levelup.gitconnected.com/understanding-use-of-the-and-symbols-in-css-selectors-95552eb436f5

Answer 2

You can just add a second class to radio inputs, and display__tabs--content. Then, you can just add CSS for each one of them.
.display__tabs {
display: flex;
flex-wrap: wrap;
}
.display__tabs--tab {
display: none;
}
.tab1:checked ~ .display__tabs--label ~ .display__tabs--content.content1 {
display: block;
}
.tab2:checked ~ .display__tabs--label ~ .display__tabs--content.content2 {
display: block;
}
.tab3:checked ~ .display__tabs--label ~ .display__tabs--content.content3 {
display: block;
}
.display__tabs--label {
cursor: pointer;
padding: 25px;
color: #2e2e2e;
}
.display__tabs--label:hover {
color: #aeaeae;
background-color: #2e2e2e;
font-weight: bold;
text-decoration: underline;
}
.display__tabs--content {
width: 100%;
padding: 20px;
order: 1;
display: none;
}
<div class="display__tabs">
<input type="radio" class="display__tabs--tab tab1" id="display-module-info" name="module" checked="checked" />
<label class="display__tabs--label" for="display-module-info">Info</label>
<div class="display__tabs--content content1">
<p>Module</p>
</div>
<input type="radio" class="display__tabs--tab tab2" id="display-module-wsu" name="module" />
<label for="display-module-wsu" class="display__tabs--label">Wsu</label>
<div class="display__tabs--content content2">
<p>
WSU
</p>
</div>
<input type="radio" class="display__tabs--tab tab3" id="display-module-sections" name="module" />
<label for="display-module-sections" class="display__tabs--label">Sections</label>
<div class="display__tabs--content content3">
<p>
SECTION
</p>
</div>
</div>