1. 35
  1.  

  2. 11

    For those who don’t want to watch the video, the trick is to nest blocks, where the title of a given tree level is in the element and the subtree consists of more details elements outside the summary, and use the rule

    details > *:not(summary) { padding-left: 2em; }
    
    1. 4

      Technically the trees are still trees and they’re still interactive without the rule. The rule just makes the tree/hierarchy visually noticeable 🙃

      1. 4

        I like this method of adding tree-like styling to these: https://iamkate.com/code/tree-views/

        1. 4

          Is this an in spec use of Summary/Details tags? Like, as opposed to using it for menus and modals? Maybe yes if information, no if navigation?

          1. 4

            After poking around on …

            https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details,

            https://w3c.github.io/aria/#group

            https://www.w3.org/TR/2011/WD-html5-author-20110809/the-details-element.html

            … I tend to think it is.

            The way I read those pages is that the details element is simply a group of stuff with a summary and the behavior that everything except the summary will only be displayed if the user wants to see it.