I would like to be able to click the toggle UI element (checkbox), and have it show/hide one or the other div.
The current CSS (below) is just some styling; and I can’t change my basic DIV HTML structure.
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
cursor: pointer; }
input[type="checkbox"]:focus {
outline: 0; }
.toggle {
height: 32px;
width: 52px;
border-radius: 16px;
display: inline-block;
position: relative;
margin: 0;
border: 2px solid #474755;
background: linear-gradient(180deg, #2D2F39 0%, #1F2027 100%);
transition: all .2s ease; }
.toggle:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 24px;
height: 24px;
border-radius: 50%;
background: white;
box-shadow: 0 1px 2px rgba(44, 44, 44, 0.2);
transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35); }
.toggle:checked {
border-color: #654FEC; }
.toggle:checked:after {
transform: translatex(20px); }
<div id="a">...</div>
<div id="b">...</div>
<div id="c">
<div>
<div>
<input type="checkbox" class="toggle" checked>
</div>
</div>
</div>
<div id="d">...</div>
<div id="content-one">Content one</div>
<div id="content-two">Content two</div>
<div id="e">...</div>
</div>
EDIT:
I also wanted to share a simpler version that ChatGPT (Bing Chat) provided (did nothing, LOL):
#content-two {
display: none;
}
.toggle:checked ~ #content-two {
display: normal;
}
.toggle:checked ~ #content-one {
display: none;
}
<div id="a">...</div>
<div id="b">...</div>
<div id="c">
<div>
<div>
<input type="checkbox" class="toggle" checked>
</div>
</div>
</div>
<div id="d">...</div>
<div id="content-one">Content one</div>
<div id="content-two">Content two</div>
<div id="e">...</div>