implement collapsible table of contents at the top of the post body, remove it from the sidebar

assets/js/custom.js

@@ -0,0 +1,13 @@
+// Make the collapsible content accessible
+let myLabels = document.querySelectorAll('.lbl-toggle');
+
+Array.from(myLabels).forEach(label => {
+  label.addEventListener('keydown', e => {
+    // 32 === spacebar
+    // 13 === enter
+    if (e.which === 32 || e.which === 13) {
+      e.preventDefault();
+      label.click();
+    };
+  });
+});

assets/sass/_custom.sass

@@ -1,7 +1,64 @@
+// Offset scrolling to compensate for navbar so anchors work correctly
 html, body 
     scroll-padding-top: 4.5rem
 
+// Impose a max height on the site logo so it doesn't scale and look bad
 .nav
     &_brand
         img
-            max-height: 2rem
+            max-height: 2rem
+
+// Magic for collapsing content, borrowed from https://www.digitalocean.com/community/tutorials/css-collapsible
+input[type='checkbox']
+    display: none  
+
+.lbl-toggle
+    display: block
+    font-size: 125%
+    cursor: pointer
+    transition: all 0.25s ease-out
+              
+.lbl-toggle::before
+    content: ' '
+    display: inline-block
+    border-top: 5px solid transparent
+    border-bottom: 5px solid transparent
+    border-left: 5px solid currentColor
+    verticale-align: middle
+    margin-right: .7rem
+    transform: translateY(-2px)
+    transition: transform .2s ease-out
+
+.collapsible-content .content-inner
+    border-bottom-left-radius: 7px
+    border-bottom-right-radius: 7px
+    padding: .5rem 1rem
+
+.collapsible-content
+    max-height: 0px
+    overflow: hidden
+    transition: max-height .25s ease-in-out
+
+.toggle:checked + .lbl-toggle + .collapsible-content
+    max-height: 100vh
+
+.toggle:checked + .lbl-toggle::before
+    transform: rotate(90deg) translateX(-3px)
+
+.toggle:checked + .lbl-toggle
+    border-bottom-right-radius: 0
+    border-bottom-left-radius: 0
+
+// Make the ToC a bit more compact than other lists
+.post_toc
+    a
+      color: inherit
+    ul, ol
+        padding-top: 0.0rem
+        padding-left: 0.5rem
+        padding-bottom: 0.0rem
+    li
+        padding-top: 0.01rem
+        padding-left: 0.5rem
+        padding-bottom: 0.01rem
+        font-size: 1rem

layouts/_default/single.html

@@ -15,6 +15,19 @@
     <h1 class="post_title">{{ $t }}</h1>
     {{- partial "post-meta" . }}
     {{- partial "image-feature" . }}
+    {{ if and (gt .WordCount 400 ) (gt (len .TableOfContents) 180) ($s.toc) }}
+    <div class="post_toc">
+      <div class="wrap-collapsible">
+        <input id="collapsible" class="toggle" type="checkbox">
+        <label for="collapsible" class="lbl-toggle" tabindex="0">{{ T "overview" }}...</label>
+        <div class="collapsible-content">
+          <div class="content-inner">
+          {{ .TableOfContents }}
+          </div>
+        </div>
+      </div>
+    </div>
+    {{ end }}
     <div class="post_body">
       {{- .Content }}
     </div>

layouts/partials/sidebar.html

@@ -30,12 +30,6 @@
       <a href='{{ absLangURL (default "about/" $s.introURL) }}' class="button mt-1" role="button" title='{{ $r }}'>{{ $r }}</a>
       {{- end }}
     {{- end }}
-    {{ if and (gt .WordCount 400 ) (gt (len .TableOfContents) 180) ($s.toc) }}
-    <div class="post_toc">
-      <h2>{{ T "overview" }}</h2>
-      {{ .TableOfContents }}
-    </div>
-    {{ end }}
     {{- $relatedInSidebar := true }}
     {{- if eq $s.showRelatedInSidebar false }}
       {{ $relatedInSidebar = false }}