This can be quite useful on GitHub to hide stuff like long log output or a patch (GitHub doesn’t set a max-height/overflow-y: auto on <pre> elements).
details is great, and I have played with it extensively, but ultimately decided against using it for two reasons:
a) It is not supported by many browsers, including, most notably, both IE and Edge. In these cases, all of the content is shown, which is an OK fallback.
b) Even though it looks rather obvious to me, the overwhelming majority of users I have studied either do not notice it or can’t be bothered to expand it, looking for other options instead.
There seems to be no way to open/close the details element based on display dimensions (css media queries), which is a real shame.
My intent is to have a collapsible navigation (nav) element that only defaults to opened, when there is enough space. My current approach is using a heavily styled/misused checkbox elemen with onclick event handling, which feels a bit wrong to me
You should be able to do the checkbox hacks method with no JS (clickable area is a label, checkbox itself is adjacent to the bit that needs unrolling). Pretty yuck though.
I did that with just CSS before, following some online guide. It works, even if it feels hacky.
Ah, true. But still a bit meh :)
Another Bad Hack you could do is put the same content in a details tag and a <div class=nodetails>, and use a media query to display:none either details or .nodetails depending on browser size, but that also kind of sucks, because now you’re sending two identical copies of the same data.
It’s just a tiny navigation element. I’ll consider it. Thanks.