Hacker News Reader

Comment by bigato | Hacker News Reader

I recently used html5 sumary/detail to implement a treeview and it was the best experience ever solving such problem on the web. Very simple and easily customizable via css, and if you render it on the server, you don't need javascript at all.

View on HN

> and if you render it on the server, you don't need javascript at all.

I find it amusing how things have changed. We've almost come full circle.

Server-rendered HTML: the once and future king

https://pbs.twimg.com/media/ENnKCr2U8AAw4Bf?format=jpg&name=...

Thank you for posting about this. Never heard of that element combo. Learn something new everyday.

I was about to say still not supported on Edge, then I realized Edge has become Chromium.

^generated, not rendered, the browser renders.

Any example?

Unfortunately I didn't find an example that was simple enough on the web, and the work I did is not open source, so here is the best link I found, which was by the way what I used to derive my implementation:

https://codepen.io/dsheiko/pen/MvEpXm

This is a bit fancier than necessary and that makes it not so good as an example for learning, but hopefully it will be enough to give you the idea.

edit: this one is a little bit better to understand the basics: https://medium.com/metaphorical-web/javascript-treeview-cont...

In short, summary/detail has the native hability to collapse the details and you can explore that to implement a tree by nesting them.

Scratch my post above, I made a better example:

https://pastebin.com/raw/9D02J80s

Thank you, that's enlightening.

Unfortunately, this is missing the semantic metadata about the fact that it's a tree. It might be fine in some cases, but in general you would want to add some Aria attributes. But i'm not sure whether you could generate the entire thing server-side.

Here's some examples of this lovely element. I can't believe I hadn't heard about this before! I shared it with several web designers/developer friends who all had the same reaction.

https://css-tricks.com/quick-reminder-that-details-summary-i...

Reply on news.ycombinator.com