As an example - this (excluding transitions and scss stuff). Everything would be fine if for worked as it supposed to. If I remove checkbox position styles to make it visible and then click on checkboxes directly, it works as expected, but as clicking on label never checks the checkbox, it doesn’t. So styles and selectors are not the problem. Also putting everything into a label is so wrong semantically - label is inline and most content tags (div, p, etc.) are block elements, which should never be inside of inline elements.
I meant that if you’d nest your inputs inside the label, the CSS-selector would probably be an issue, since you can’t move up in hierarchy. You’d have to place the .tab-content inside the label as well which would result in it triggering the label click as mentioned in some posts above.
Anyways, what’s the big issue about JS? If you want to do things like remembering the open-state of each section upon plugin load (just a neat little UX feature), you’d need some JS anyways. Just an example, there are probably more things which could be useful but require JS.
Exactly
The issue with semantics I mentioned above. Even though nothing really bad would happen, but again just another workaround which should not be forced
In my case I have a React state, which defines if it’s checked or not, so separate JS logic would not be needed at all
I just don’t see the need to build a css-only solution in the first place. The “checkbox-way” of building such a UI might be reasonable in some environments to provide some kind of fallback for users without JS etc., but the plugin doesn’t work without JS anyways so you could as well make use of it.
I guess (internal) state management of input elements such a radio button or checkbox is also a benefit since you have to write less code, but handling all the event and state logic in a component gives you more control on the other hand.
Despite all that I do of course agree with you that for/htmlFor + id should work out of the box.
Checkbox solution is also useful to interact with keyboard and not just a mouse. Without checkbox keyboard navigation has no element to focus to
2 Likes