If you usually reach for JavaScript when trying to create show/hide toggle on elements, this post is for you.
This post is a reply to the tweet by Jake VanderPlas:
Github tip: you can use <details></details> tags in @github markdown to add collabsible/expandable content: pic.twitter.com/Pco0KRx2De
— Jake VanderPlas (@jakevdp) May 4, 2018
This is pretty cool. I could see myself overusing these too!
Published by
Chris Aldrich
I'm a biomedical and electrical engineer with interests in information theory, complexity, evolution, genetics, signal processing, IndieWeb, theoretical mathematics, and big history.
I'm also a talent manager-producer-publisher in the entertainment industry with expertise in representation, distribution, finance, production, content delivery, and new media.
View all posts by Chris Aldrich
A few weeks ago I read a post by Jamie Tanna on Using <details> tags for HTML-only UI toggles.
I thought it was a pretty slick use of HTML to create some really simple and broadly useful UI.
Then earlier today I noticed that Jeremy Keith has recently switched to using this on his personal site in the comments section to provide toggles for his various webmention types including shares, likes, bookmarks, etc. But this is where I’m noticing a quirky UI issue that isn’t as web friendly as it could be. Jeremy and others (including myself own my own site) will often provide ID tags so that one can give permalinks to the individual comments using fragments of the form:
https://adactio.com/journal/15050#comment70567 or
https://adactio.com/journal/15050#comment71896
But here’s where the UI problem lies. The first fragment URL only resolves to the page instead of the specific bookmark hiding behind a <details> tag whereas the second fragment URL resolves to the page and automatically scrolls down to a comment by DominoPivot. It does this in both Chrome and FireFox and I would presume operates similarly in other browsers.
I suspect that most users would expect/prefer that the fragment URL should automatically expand the <details> tag and scroll down the page to that ID or fragment as well.
Perhaps Jamie, Jeremy, Tantek, Kevin or others may have some trickery to make this happen? Otherwise, do we need to start digging into specs and browsers to get them to better support this sort of fragment related functionality? Perhaps it’s this section of the HTML spec, the URL of which has such a fragment and therefor scrolls down properly if you click on it? (Meta pun intended.)
Syndicated copies: