4 ms·

Any example?

• bigato 7y 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 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-controls-devil-in-the-details-74c252e00ed8 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.
  • bigato 7y ago
    Scratch my post above, I made a better example: https://pastebin.com/raw/9D02J80s https://pastebin.com/raw/9D02J80s
    • jakearmitage 7y ago
      Thank you, that's enlightening.
    • lukastyrychtr 7y 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.
• qubitcoder 7y ago
  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-is-the-easiest-way-ever-to-make-an-accordion/ https://css-tricks.com/quick-reminder-that-details-summary-i...