// super-simple HTML tree with expandable/collapsible nodes sclass HTMLTree { S headStuff() { ret loadJQuery2() + hcss([[ .tree-toggler { display: inline-block; height: 1.3em; width: 0.7em; background: cornflowerblue; padding-left: 0.5em; padding-right: 0.5em; /*line-height: 50px; */ text-align: center; } .tree-toggler a { text-decoration: none; } ]]) + hjs([[ function tree_expandCollapse(id) { var children = $("#" + id); children.toggle(); var vis = children.is(':visible'); $("#" + id + "_toggle a").html(vis ? "–" : "+"); } ]]); } S root(S contents) { ret ul(contents); } S node(S nodeHTML, S... children) { S id = aGlobalID(); ret div( ahref_javascript( "tree_expandCollapse(" + jsQuote(id) + ");", "+"), class := "tree-toggler", id := id + "_toggle") + " " + nodeHTML + ul(asList(children), +id, style := "display: none"); } }