Merge pull request #69 from muan/details

Add support for expandable tree view
xeronith · Apr 27, 2020 · 68deceb · 68deceb
2 parents bfdd0ec + e4d19f4
commit 68deceb
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 4 deletions.
diff --git a/docs/docs.css b/docs/docs.css
@@ -102,6 +102,10 @@ summary {
   display: inline;
 }
 
+summary::-webkit-details-marker {
+    display: none;
+}
+
 details[open] summary {
   margin-bottom: 8px;
 }

diff --git 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
@@ -488,6 +488,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);