No-script activation

Every case below is pure HTML + CSS. Nothing here needs JavaScript; each one should work with scripting switched off.

1. label[for] → display:none checkbox (brave.com's menu)

The input generates no box at all, so only the label can be clicked. Expect the panel to appear and the button to turn red.

panel 1 — label[for] reached a boxless checkbox

2. label wrapping its control (no for=)

Clicking the words must toggle the checkbox next to them.

3. checkbox clicked directly

Regression guard: this always toggled, but the sibling rule used to be left selecting against the old state, so nothing appeared.

toggle me
panel 3 — :checked ~ after a direct click

4. radio group

Turning one on must turn the other off, panels following.

panel 4a — radio one
panel 4b — radio two

5. details / summary accordion

Click a heading: it opens, the + becomes −, and the heading turns green. The second one starts open, so it should close.

Is this a real disclosure widget?

Yes — the body is not boxed at all until open is set.

Does it start open?

This one does, and clicking the heading must close it again.

Nested content survives?

6. precedence inside a summary

The link must navigate; clicking anywhere else on the heading must toggle instead.

heading with a link in it

If you landed here the link won, which is correct.

7. a second summary is not a widget

Only the first summary discloses; the second is ordinary content and must stay hidden while closed.

first summary (this one toggles) second summary — content, not a widget

body text