From 0cfecdab186d5c1833cba89488edc28b1c26ac14 Mon Sep 17 00:00:00 2001
From: BBaoVanC <bbaovanc@bbaovanc.com>
Date: Tue, 26 Oct 2021 20:50:45 -0500
Subject: [PATCH] Make table of contents collapsible

---
 assets/css/bobastyle.css     | 10 ++++++++--
 layouts/_default/single.html |  8 ++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css
index c497a95..31b2018 100644
--- a/assets/css/bobastyle.css
+++ b/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 {
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 86d9164..dbdae26 100644
--- a/layouts/_default/single.html
+++ b/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" . }}