Can you make it so that when I click on the toggle checkbox, it will hide/show one of the two div elements?
The CSS provided below is for styling purposes only; and my HTML structure for the DIV elements cannot be altered.
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 received a simplified version from ChatGPT (Bing Chat) that did not work:
#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>