First draft

layouts/partials/toc.html

@@ -0,0 +1,34 @@
+{{- $toc := .TableOfContents -}}
+{{- if $toc -}}
+    <!-- When the $toc variable is not empty, generate the table of contents for the article -->
+    <div class="post-toc">
+        {{ if and (gt .WordCount 80) (.Params.toc | default true) }}
+            <aside>
+                <button id="tocButton" ><h4 id="contents" style="margin-left: 1vw;color:rgb(96, 134, 180);margin-bottom: 0;">CONTENTS</h4></button>
+                <div id="hide">
+                    {{- $toc := replaceRE `<ul>\n<li>\n<ul>` `<ul>` $toc -}}
+                        {{- safeHTML $toc -}}
+                </div>
+            </aside>
+        {{ end }}
+    </div>
+{{- end -}}
+<script>
+    // document.addEventListener('DOMContentLoaded', function() {
+        let button = document.getElementById('tocButton');
+        let hide = document.getElementById("hide");
+        let contents=document.getElementById("contents");
+        button.addEventListener("click", function() {
+        if (hide.style.display!='block') {
+            hide.style.display='block'
+        } else {
+            hide.style.display='none'
+            contents.style.color='rgb(96, 134, 180)'
+        }
+        });
+    // });
+
+
+
+
+</script>