content: generateAdditionalFilesList: use <details> elements

2 files changed, 15 insertions, 8 deletions

diff --git a/src/content/dependencies/generateAdditionalFilesList.js b/src/content/dependencies/generateAdditionalFilesList.js
index 2737a410..f504cf80 100644
--- a/src/content/dependencies/generateAdditionalFilesList.js
+++ b/src/content/dependencies/generateAdditionalFilesList.js
@@ -14,7 +14,7 @@ export default {
   },
 
   generate: (slots, {html}) =>
-    html.tag('dl',
+    html.tag('ul', {class: 'additional-files-list'},
       stitchArrays({
         chunk: slots.chunks,
         items: slots.chunkItems,
diff --git a/src/content/dependencies/generateAdditionalFilesListChunk.js b/src/content/dependencies/generateAdditionalFilesListChunk.js
index bb16b778..86e40062 100644
--- a/src/content/dependencies/generateAdditionalFilesListChunk.js
+++ b/src/content/dependencies/generateAdditionalFilesListChunk.js
@@ -26,14 +26,21 @@ export default {
       titleOptions.description = slots.description;
     }
 
-    const dt =
-      html.tag('dt',
-        language.$(...titleParts, titleOptions));
+    const summary =
+      html.tag('summary',
+        html.tag('span',
+          language.$(...titleParts, titleOptions)));
 
-    const dd =
-      html.tag('dd',
-        html.tag('ul', slots.items));
+    const content =
+      html.tag('ul', slots.items);
 
-    return html.tags([dt, dd]);
+    const details =
+      html.tag('details',
+        slots.items.length <= 5 &&
+          {open: true},
+
+        [summary, content]);
+
+    return html.tag('li', details);
   },
 };