From c258457c9e09269cbb4fff2db4e5fe4a0491077c Mon Sep 17 00:00:00 2001
From: Mu-An Chiou <me@muanchiou.com>
Date: Sun, 26 Apr 2020 23:07:20 -0400
Subject: [PATCH] Add support for expandable file tree with details

---
 docs/index.html.ejs | 35 +++++++++++++++++++++++++++++++----
 style.css           | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 7ca9d5e..c7990cc 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -586,6 +586,10 @@
           (no class needed on these). This will provide them with a nice dotted
           border and indentation to illustrate the structure of the tree.
         </p>
+        <p>
+          To create expandable sections, wrap child lists inside of
+          <code>details</code> elements.
+        </p>
 
         <%- example(`
           <ul class="tree-view">
@@ -600,10 +604,33 @@
               </ul>
             </li>
             <li>
-              JavaScript
-              <ul>
-                <li>Avoid at all costs</li>
-              </ul>
+              <details open>
+                <summary>JavaScript</summary>
+                <ul>
+                  <li>Avoid at all costs</li>
+                  <li>
+                    <details>
+                      <summary>Unless</summary>
+                      <ul>
+                        <li>Avoid</li>
+                        <li>
+                          <details>
+                            <summary>At</summary>
+                            <ul>
+                              <li>Avoid</li>
+                              <li>At</li>
+                              <li>All</li>
+                              <li>Cost</li>
+                            </ul>
+                          </details>
+                        </li>
+                        <li>All</li>
+                        <li>Cost</li>
+                      </ul>
+                    </details>
+                  </li>
+                </ul>
+              </details>
             </li>
             <li>HTML</li>
             <li>Special Thanks</li>
diff --git a/style.css b/style.css
index 2970bd4..4493a41 100644
--- a/style.css
+++ b/style.css
@@ -490,6 +490,38 @@ ul.tree-view ul > li:last-child::after {
   background: var(--button-highlight);
 }
 
+ul.tree-view details {
+  margin-top: 0;
+}
+
+ul.tree-view details[open] summary {
+  margin-bottom: 0;
+}
+
+ul.tree-view ul details > summary:before {
+  margin-left: -22px;
+  position: relative;
+  z-index: 1;
+}
+
+ul.tree-view details > summary:before {
+  text-align: center;
+  display: block;
+  float: left;
+  content: '+';
+  border: 1px solid #808080;
+  width: 8px;
+  height: 9px;
+  line-height: 9px;
+  margin-right: 5px;
+  padding-left: 1px;
+  background-color: #fff;
+}
+
+ul.tree-view details[open] > summary:before {
+  content: '-'
+}
+
 pre {
   display: block;
   background: var(--button-highlight);