I'm currently working on implementing a toggler that, when clicked, will hide certain elements. Specifically, I want it to hide the sidebar once it's functioning correctly. However, I've hit a roadblock and can't seem to figure out how to hide these elements.
The technology I'm using for this project is NextJS.
<input type="checkbox" id="sidebarToggle" className={styles.sidebarToggle} />
<div className={styles.dashboard}>
<div className={styles.sidebar>
<div className={styles.sidebarHeader}>
<h3 class={styles.brand}>
<span><img src="/unlink.svg" alt="unlink"/></span>
<span>easyTechServ</span>
</h3>
<label htmlFor="sidebarToggle"><img src="/menu-alt.svg" alt="menu-alt"/></label>
</div>
</div>
</div>
Below you'll find the corresponding CSS:
.sidebarToggle:checked ~ .sidebar .sidebarHeader h3 span:last-child,
.sidebarToggle:checked ~ .sidebar li span:last-child {
display: none;
}