Toggle div by checkbox (without JS)

Question

I want to toggle a <div> via a checkbox.


<div class="docs">...</div>

...

<input type="checkbox" id="toggle-docs">

The docs should only be visible if the checkbox is checked.

This should work without JS.

Up to now I only found solutions which require the checkbox to be near the div (via + or ~ selector).

Is there a way to solve this with modern CSS?

Stephen M Irving · Accepted Answer · 2024-03-15 08:23:55Z

1

This is doable with :has, which has baseline support since December 2023.

div.docs {
    display: none;
}

body:has(#toggle-docs:checked) div.docs  {
    display: block;
}

<div class="docs">...</div>

<input type="checkbox" id="toggle-docs">

This shows docs only if the checkbox is checked.

Stephen M Irving

1,52210 silver badges21 bronze badges

answered Mar 14, 2024 at 21:30

guettli

27.7k109 gold badges424 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1