Make table of contents collapsible

assets/css/bobastyle.css

@@ -62,8 +62,14 @@
 
 
 /* Content formatting */
-#table-of-contents h2 {
-  font-size: 20px;
+#table-of-contents {
+  background-color: #222;
+  padding: 8px 20px;
+  border-radius: 5px;
+}
+
+#table-of-contents summary {
+  cursor: pointer;
 }
 
 .content, footer {

layouts/_default/single.html

@@ -10,13 +10,13 @@
 
 {{ if .Params.Toc }}
 <div id="table-of-contents">
-    <h2>{{ i18n "table_of_contents" }}</h2>
-    {{ .TableOfContents }}
+    <details>
+        <summary>{{ i18n "table_of_contents" }}</summary>
+        {{ .TableOfContents }}
+    </details>
 </div>
 {{ end }}
 
-<hr>
-
 {{ with .Resources.GetMatch "feature" }}
 <div class="post-media">
     {{ partial "figure.html" . }}