From 6f56cce05395f2f9720ac99356bbfe26abd8d27d Mon Sep 17 00:00:00 2001
From: Mu-An Chiou <me@muanchiou.com>
Date: Sun, 26 Apr 2020 23:06:16 -0400
Subject: [PATCH 1/3] Add details reset for Chrome

---
 docs/docs.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/docs.css b/docs/docs.css
index a38ce5b..f40f704 100644
--- a/docs/docs.css
+++ b/docs/docs.css
@@ -102,6 +102,8 @@ summary {
   display: inline;
 }
 
+summary::-webkit-details-marker { display: none; }
+
 details[open] summary {
   margin-bottom: 8px;
 }

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 2/3] 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);

From e4d19f431e7800ca9465e918215537416de813c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mu-An=20=E6=85=95=E5=AE=89?= <muan@github.com>
Date: Mon, 27 Apr 2020 10:00:08 -0400
Subject: [PATCH 3/3] Apply code style suggestion

Co-Authored-By: Ralfs Garkaklis <ralfs@garkaklis.com>
---
 docs/docs.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/docs.css b/docs/docs.css
index f40f704..74793c9 100644
--- a/docs/docs.css
+++ b/docs/docs.css
@@ -102,7 +102,9 @@ summary {
   display: inline;
 }
 
-summary::-webkit-details-marker { display: none; }
+summary::-webkit-details-marker {
+    display: none;
+}
 
 details[open] summary {
   margin-bottom: 8px;