Greetings, I am seeking assistance in understanding why the second tab button is not functioning properly. I am attempting to create a layout with a wrapper div, a left side div containing label buttons, and a right side div for displaying content. When I place the show/hide div on the left with the buttons, it works as expected. However, when it is placed in the div on the right, the button does not respond.
#chk:checked~#tab1,
#chk2:checked~#tab2 {
display: none;
}
div.wrapper {
width: 100%;
background: black;
height: 300px;
}
div.forred {
width: 80%;
float: right;
}
div.left {
width: 20%;
float left;
}
div#tab1 {
background: red;
width: 100%;
text-align: center;
}
div#tab2 {
background: red;
width: 100%;
text-align: center;
}
div.right {
width: 80%;
float: right;
}
input.tabs {
display: none;
}
label.tab_button {
float: left;
padding: 15px 0px;
font-weight: 600;
text-align: center;
color: #FFFFFF;
border-bottom: 1px inset black;
background: #30E514;
width: 100%;
}<div class="wrapper">
<div class="left">
<input type=checkbox id=chk class=tabs>
<label for=chk class=tab_button>tab 1</label>
<input type=checkbox id=chk2 class=tabs>
<label for=chk2 class=tab_button>tab 2</label>
<div id=tab1>
CONTENT HERE
</div>
</div>
<div class="right">
<div id=tab2>
CONTENT HERE
</div>
</div>
</div>