Putting the “Checkbox hack” to good use
Excuse me, putting what to good use?
Consider the following three checkboxes:
Click/tap the checkboxes to select/deselect them.
Now, consider the following three radio buttons:
Click/tap the radio buttons to select/deselect them.
Observations
1. Any combination of checkboxes can be selected.
2. Only one radio button (in a group) can be selected at a time.
The behaviours observed above can be used in applications for which they were not intended. The word is clever and the applications can mimic JavaScript in some situations. Put differently: We are able to replace JavaScript functionality with pure CSS. An example: A drop-down menu typically toggled via, say, jQuery (as used for the navigation in this here site).
Another application, which has been embraced and used to a large extent on mobile devices (were minuscule screen real estate is a concern), is the accordion. The most common use is the variant where the contents of only one accordion element is visible at any given time. When another accordion element is selected, the former hides its contents again. It may take some getting used to; one does not select the same element to close it, one must select a different element. With the latter in mind, we will explore the second variant here, the one where several accordion elements can be open simultaneously and where one selects the same accordion element to open it and to close it. To accomplish this, we will “hack” our way in, using three checkboxes (surprise!) and forego radio buttons (which would be perfect for the first accordion variant).
Rather than describing the functionality and code in an exhausting tutorial, this is a case where showing is better than explaining. Follow the link below for a demonstration and examine the source code for the demo page. Comments in the CSS code will enlighten where obscurity creeps in.
Note: In the input elements above, browser default syles have not been stripped out (they exhibit the default styles of any current browser). In the accordion demo, input elements have been tailor-made for visual consistency.
Disclaimer?
In his article Stuff you can do with the “Checkbox Hack” Chris Coyier covers his back with a disclaimer:
Some of this stuff crosses the line of what you “should” do with CSS and introduces some bad semantics. It‘s still wicked fun to play with and cool that it‘s possible, but in general functional behavior should be controlled by JavaScript.
In a comment to Coyier’s article, reader ‘tom’ responded thus:
This … pretty much teaches you how to duct tape your way through web development.
Then ‘cnwtx’ responded to tom’s response:
Duct tape fixes everything! Including web design.
Fun read, indeed!
When Ryan Seddon had a brain wave and published the method back in 2010, he concluded that it was accessible, could be keyboard controlled, did not use any hacks, worked in [then] 80% of browsers and degraded nicely in non-supporting browsers. I do not know to what extent he tested accessibility which may or may not suffer. My own small and personal disclaimer is that I have not tested it (either).
Reference
– Raúl Barrera, Pure CSS Accordion