> 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.

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

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.

Thank you, that's enlightening.

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...