4 files changed, 77 insertions, 45 deletions

diff --git a/src/content/dependencies/generateArtTagAncestorDescendantMapList.js b/src/content/dependencies/generateArtTagAncestorDescendantMapList.js
index 30d4f4de..87b38059 100644
--- a/src/content/dependencies/generateArtTagAncestorDescendantMapList.js
+++ b/src/content/dependencies/generateArtTagAncestorDescendantMapList.js
@@ -95,7 +95,7 @@ export default {
 
   generate(data, relations, {html, language}) {
     const recursive = (dataNode, relationsNode) =>
-      html.tag('dl', [
+      html.tag('dl', {class: dataNode === data.root && 'tree-list'}, [
         dataNode.displayBriefly &&
           html.tag('dt',
             language.$('artTagPage.sidebar.otherTagsExempt', {
diff --git a/src/content/dependencies/generateArtTagAncestorSidebarBox.js b/src/content/dependencies/generateArtTagAncestorSidebarBox.js
deleted file mode 100644
index 1f90a014..00000000
--- a/src/content/dependencies/generateArtTagAncestorSidebarBox.js
+++ /dev/null
@@ -1,34 +0,0 @@
-export default {
-  contentDependencies: [
-    'generateArtTagAncestorDescendantMapList',
-    'generatePageSidebarBox',
-    'linkArtTagDynamically',
-  ],
-
-  extraDependencies: ['html'],
-
-  relations: (relation, ancestorArtTag, descendantArtTag) => ({
-    sidebarBox:
-      relation('generatePageSidebarBox'),
-
-    ancestorArtTagLink:
-      relation('linkArtTagDynamically', ancestorArtTag),
-
-    ancestorArtTagMapList:
-      relation('generateArtTagAncestorDescendantMapList',
-        ancestorArtTag,
-        descendantArtTag),
-  }),
-
-  generate: (relations, {html}) =>
-    relations.sidebarBox.slots({
-      attributes: {class: 'tag-ancestor-sidebar-box'},
-
-      content: html.tags([
-        html.tag('h2',
-          relations.ancestorArtTagLink),
-
-        relations.ancestorArtTagMapList,
-      ]),
-    }),
-};
diff --git a/src/content/dependencies/generateArtTagSidebar.js b/src/content/dependencies/generateArtTagSidebar.js
index 2c4b77b1..8b6b1a5f 100644
--- a/src/content/dependencies/generateArtTagSidebar.js
+++ b/src/content/dependencies/generateArtTagSidebar.js
@@ -1,12 +1,14 @@
-import {collectTreeLeaves} from '#sugar';
+import {collectTreeLeaves, stitchArrays} from '#sugar';
 
 export default {
   contentDependencies: [
-    'generateArtTagAncestorSidebarBox',
     'generatePageSidebar',
+    'generatePageSidebarBox',
+    'generateArtTagAncestorDescendantMapList',
+    'linkArtTagDynamically',
   ],
 
-  extraDependencies: ['wikiData'],
+  extraDependencies: ['html', 'language', 'wikiData'],
 
   sprawl: ({artTagData}) =>
     ({artTagData}),
@@ -27,14 +29,53 @@ export default {
     sidebar:
       relation('generatePageSidebar'),
 
-    ancestorBoxes:
+    sidebarBox:
+      relation('generatePageSidebarBox'),
+
+    artTagLink:
+      relation('linkArtTagDynamically', artTag),
+
+    furthestAncestorArtTagMapLists:
       query.furthestAncestorArtTags
         .map(ancestorArtTag =>
-          relation('generateArtTagAncestorSidebarBox', ancestorArtTag, artTag)),
+          relation('generateArtTagAncestorDescendantMapList',
+            ancestorArtTag,
+            artTag)),
   }),
 
-  generate: (relations) =>
+  data: query => ({
+    furthestAncestorArtTagNames:
+      query.furthestAncestorArtTags
+        .map(ancestorArtTag => ancestorArtTag.name),
+  }),
+
+  generate: (data, relations, {html, language}) =>
     relations.sidebar.slots({
-      boxes: relations.ancestorBoxes,
+      boxes: [
+        relations.sidebarBox.slots({
+          content: [
+            html.tag('h1',
+              relations.artTagLink),
+
+            stitchArrays({
+              name: data.furthestAncestorArtTagNames,
+              list: relations.furthestAncestorArtTagMapLists,
+            }).map(({name, list}) =>
+                html.tag('details',
+                  {
+                    class: 'has-tree-list',
+                    open: relations.furthestAncestorArtTagMapLists.length === 1,
+                  },
+                  [
+                    html.tag('summary',
+                      html.tag('span',
+                        html.tag('b',
+                          language.sanitize(name)))),
+
+                    list,
+                  ])),
+          ],
+        }),
+      ],
     }),
 };
diff --git a/src/static/css/site.css b/src/static/css/site.css
index cb992d6c..4fdf0fcc 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -394,12 +394,37 @@ body::before, .wallpaper-part {
   margin-left: 0;
 }
 
-.sidebar dl > dd > dl {
+.sidebar > dl .side {
+  padding-left: 10px;
+}
+
+.sidebar details.has-tree-list[open] summary {
+  font-weight: 800;
+}
+
+.sidebar dl.tree-list {
+  margin-top: 0.25em;
+  line-height: 1.25em;
   padding-left: 15px;
 }
 
-.sidebar > dl .side {
-  padding-left: 10px;
+.sidebar dl.tree-list dt {
+  display: list-item;
+  list-style-type: disc;
+  padding-left: 0;
+  margin-left: 20px;
+}
+
+.sidebar dl.tree-list dl {
+  padding-left: 15px;
+}
+
+.sidebar dl.tree-list dd {
+  margin-left: 0;
+}
+
+.sidebar dl.tree-list .current {
+  font-weight: 800;
 }
 
 .sidebar li.current {