diff --git a/assets/css/main.css b/assets/css/main.css
index e42f2a17..4f705d0b 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -174,7 +174,8 @@ h6::before { color: var(--maincolor); content: '###### '; }
 
 .toc {
   background-color: #ececec;
-  border-radius: 5px;
+  /* border-radius: 5px; */
+  opacity: 0.20;
   color: #232333;
   flex: 0 0 auto;
   height: auto;
@@ -184,6 +185,11 @@ h6::before { color: var(--maincolor); content: '###### '; }
   padding: 10px;
   position: sticky;
   top: 20px;
+  transition: opacity 0.1s cubic-bezier(0.4, 0, 1, 1);
+}
+
+.toc:hover {
+  opacity: 1;
 }
 
 /* Footer */
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 3739a69d..7eb761b1 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -33,10 +33,36 @@ <h1 class="title">{{ .Title }}</h1>
 
       <!-- TOC -->
       {{ if isset .Params "toc" }}
-      <div class="toc">
+      <div class="toc" id="post-toc">
         <strong>Table of contents:</strong>
         {{ .TableOfContents }}
       </div>
+
+      <script>
+        let toc_ = document.getElementById("post-toc")
+        let button_ = document.getElementById("head_toc_switch")
+        let toc_preference = localStorage.getItem("toc_preference")
+  
+        if (toc_preference == "hide") {
+          toc_.style.display = "none"
+          button_.innerText = "Show Toc"
+        }
+  
+        function function_display_toc() {
+          
+          if (toc_.style.display == "none") {
+            toc_.style.display = ""
+            button_.innerText = "Hide Toc"
+            localStorage.setItem("toc_preference", "show")
+          } else {
+            toc_.style.display = "none"
+            button_.innerText = "Show Toc"
+            localStorage.setItem("toc_preference", "hide")
+          }
+        }
+  
+        document.getElementById("in_posts").style.display = "inline"
+      </script>
       {{ end }}
     </div>
 
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index f1aab073..28b15b74 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -16,6 +16,12 @@
 		{{ range .Site.Menus.main }}
 		<a href="{{ .URL }}">{{ .Name }}</a>
 		{{ end }}
+
+		<div id="in_posts" style="display: none;">
+			<span>|</span>
+			<a href="javascript:function_display_toc()" id="head_toc_switch">Hide TOC</a>
+		</div>
+		
 		{{ if eq .Site.Params.mode "toggle" -}}
 	| <span id="dark-mode-toggle" onclick="toggleTheme()">{{template "feathericon" (dict "UseCDN" .Site.Params.useCDN "Icon" "sun") }}</span>
 		<script src="{{ absURL "js/themetoggle.js" }}"></script>