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" . }}