top | item 22443783

(no title)

bigato | 6 years ago

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.

discuss

order

bigato|6 years ago

Scratch my post above, I made a better example:

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

lukastyrychtr|6 years ago

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.