diff --git a/layouts/partials/blog-sidebar-tree.html b/layouts/partials/blog-sidebar-tree.html
new file mode 100644
index 0000000000..2755cc56fc
--- /dev/null
+++ b/layouts/partials/blog-sidebar-tree.html
@@ -0,0 +1,89 @@
+{{/* The blog nav organizes posts grouped by year, which represents a customized version of the
+sidebar-tree in use elsewhere on the site. */}}
+
+{{/* We cache this partial for bigger sites and set the active class client side. */}}
+{{ $sidebarCacheLimit := cond (isset .Site.Params.ui "sidebar_cache_limit") .Site.Params.ui.sidebar_cache_limit 2000 -}}
+{{ $shouldDelayActive := ge (len .Site.Pages) $sidebarCacheLimit -}}
+<div id="td-sidebar-menu" class="td-sidebar__inner{{ if $shouldDelayActive }} d-none{{ end }}">
+  {{ if not .Site.Params.ui.sidebar_search_disable -}}
+  <form class="td-sidebar__search d-flex align-items-center">
+    {{ partial "search-input.html" . }}
+    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-section-nav" aria-expanded="false" aria-label="{{ T "sidebar_toggle_nav" }}">
+    </button>
+  </form>
+  {{ else -}}
+  <div id="content-mobile">
+  <form class="td-sidebar__search d-flex align-items-center">
+    {{ partial "search-input.html" . }}
+    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-section-nav" aria-expanded="false" aria-label="{{ T "sidebar_toggle_nav" }}">
+    </button>
+  </form>
+  </div>
+  <div id="content-desktop"></div>
+  {{ end -}}
+  <nav class="collapse td-sidebar-nav{{ if .Site.Params.ui.sidebar_menu_foldable }} foldable-nav{{ end }}" id="td-section-nav">
+    {{/* Re enable below once the disabling is done from CSS
+    {{ if  (gt (len .Site.Home.Translations) 0) -}}
+    <div class="nav-item dropdown d-block d-lg-none">
+      {{ partial "navbar-lang-selector.html" . }}
+    </div>
+    {{ end -}}
+    */}}
+    {{ $navRoot := cond (and (ne .Params.toc_root true) (eq .Site.Home.Type "docs")) .Site.Home .FirstSection -}}
+    {{ $ulNr := 0 -}}
+    {{ $ulShow := cond (isset .Site.Params.ui "ul_show") .Site.Params.ui.ul_show 1 -}}
+    {{ $sidebarMenuTruncate := cond (isset .Site.Params.ui "sidebar_menu_truncate") .Site.Params.ui.sidebar_menu_truncate 50 -}}
+    <ul class="td-sidebar-nav__section pr-md-3 ul-{{ $ulNr }}">
+      {{ template "blog-section-tree-nav-section" (dict "page" . "section" $navRoot "shouldDelayActive" $shouldDelayActive "sidebarMenuTruncate" $sidebarMenuTruncate "ulNr" $ulNr "ulShow" (add $ulShow 1)) }}
+    </ul>
+  </nav>
+</div>
+{{ define "blog-section-tree-nav-section" -}}
+{{ $s := .section -}}
+{{ $p := .page -}}
+{{ $shouldDelayActive := .shouldDelayActive -}}
+{{ $sidebarMenuTruncate := .sidebarMenuTruncate -}}
+{{ $ulNr := .ulNr -}}
+{{ $ulShow := .ulShow -}}
+{{ $postsByYear := $s.Pages.GroupByDate "2006" }}
+{{ $active := and (not $shouldDelayActive) (eq $s $p) -}}
+{{ $activePath := and (not $shouldDelayActive) (or (eq $p $s) ($p.IsDescendant $s)) -}}
+{{ $show := cond (or (lt $ulNr $ulShow) $activePath (and (not $shouldDelayActive) (eq $s.Parent $p.Parent)) (and (not $shouldDelayActive) (eq $s.Parent $p)) (not $p.Site.Params.ui.sidebar_menu_compact) (and (not $shouldDelayActive) ($p.IsDescendant $s.Parent))) true false -}}
+{{ $mid := printf "m-%s" ($s.RelPermalink | anchorize) -}}
+<li class="td-sidebar-nav__section-title td-sidebar-nav__section with-child active-path{{ if (not (or $show $p.Site.Params.ui.sidebar_menu_foldable )) }} collapse{{ end }}" id="{{ $mid }}-li">
+  {{- $ulNr := 1 }}
+  <ul class="ul-{{ $ulNr }}{{ if (gt $ulNr 1)}} foldable{{end}}">
+    {{ range $postsByYear -}}
+    {{ $year := .Key }}
+    {{ $mid := printf "m-%s-%s" ($s.RelPermalink | anchorize) ($year) -}}
+    {{ $active := and (not $shouldDelayActive) (in .Pages $p) -}}
+    <li class="td-sidebar-nav__section-title td-sidebar-nav__section with-child{{ if $active }} active-path{{ end }}{{ if (not (or $show $p.Site.Params.ui.sidebar_menu_foldable )) }} collapse{{ end }}" id="{{ $mid }}-li">
+      {{ if (and $p.Site.Params.ui.sidebar_menu_foldable (ge $ulNr 1)) -}}
+      <input type="checkbox" id="{{ $mid }}-check"{{ if $active}} checked{{ end }}/>
+      <label for="{{ $mid }}-check"><span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">{{ $year }}</span></label>
+      {{ else -}}
+      {{ with $s.Params.Icon}}<i class="{{ . }}"></i>{{ end }}<span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">{{ $year }}</span>
+      {{- end }}
+      {{- $ulNr := 2 }}
+      <ul class="ul-{{ $ulNr }}{{ if (gt $ulNr 1)}} foldable{{end}}">
+        {{ range .Pages -}}
+        {{ $mid := printf "m-%s" (.RelPermalink | anchorize) -}}
+        {{ $active := and (not $shouldDelayActive) (eq . $p) -}}
+        {{ $activePath := and (not $shouldDelayActive) (eq . $p) -}}
+        {{ $manualLink := cond (isset .Params "manuallink") .Params.manualLink ( cond (isset .Params "manuallinkrelref") (relref . .Params.manualLinkRelref) .RelPermalink) -}}
+        {{ $manualLinkTitle := cond (isset .Params "manuallinktitle") .Params.manualLinkTitle .Title -}}
+        <li class="td-sidebar-nav__section-title td-sidebar-nav__section without-child{{ if $active }} active-path{{ end }}{{ if (not (or $show $p.Site.Params.ui.sidebar_menu_foldable )) }} collapse{{ end }}" id="{{ $mid }}-li">
+          {{ if (and $p.Site.Params.ui.sidebar_menu_foldable (ge $ulNr 1)) -}}
+          <input type="checkbox" id="{{ $mid }}-check"{{ if $active}} checked{{ end }}/>
+          <label for="{{ $mid }}-check"><a href="{{ $manualLink }}"{{ if ne .LinkTitle $manualLinkTitle }} title="{{ $manualLinkTitle }}"{{ end }}{{ with .Params.manualLinkTarget }} target="{{ . }}"{{ if eq . "_blank" }} rel="noopener"{{ end }}{{ end }} class="align-left pl-0 {{ if $active}} active{{ end }} td-sidebar-link{{ if .IsPage }} td-sidebar-link__page{{ else }} td-sidebar-link__section{{ end }}" id="{{ $mid }}">{{ with .Params.Icon}}<i class="{{ . }}"></i>{{ end }}<span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">{{ .LinkTitle }}</span></a></label>
+          {{ else -}}
+          <a href="{{ $manualLink }}"{{ if ne .LinkTitle $manualLinkTitle }} title="{{ $manualLinkTitle }}"{{ end }}{{ with .Params.manualLinkTarget }} target="{{ . }}"{{ if eq . "_blank" }} rel="noopener"{{ end }}{{ end }} class="align-left pl-0{{ if $active}} active{{ end }} td-sidebar-link{{ if .IsPage }} td-sidebar-link__page{{ else }} td-sidebar-link__section{{ end }}" id="{{ $mid }}">{{ with .Params.Icon}}<i class="{{ . }}"></i>{{ end }}<span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">{{ .LinkTitle }}</span></a>
+          {{- end }}
+        </li>
+        {{- end }}
+      </ul>
+    </li>
+    {{- end }}
+  </ul>
+</li>
+{{- end }}
diff --git a/layouts/partials/blog-sidebar.html b/layouts/partials/blog-sidebar.html
index e769eca1e0..578a1ff465 100644
--- a/layouts/partials/blog-sidebar.html
+++ b/layouts/partials/blog-sidebar.html
@@ -1,99 +1,23 @@
-{{/* The blog nav organizes posts grouped by year, which represents a customized version of the
-sidebar-tree in use elsewhere on the site. */}}
-
-{{/* We cache this partial for bigger sites and set the active class client side. */}}
-{{ $shouldDelayActive := ge (len .Site.Pages) 2000 }}
-
-<div id="td-sidebar-menu" class="td-sidebar__inner{{ if $shouldDelayActive }} d-none{{ end }}">
-
-  <form class="td-sidebar__search d-flex align-items-center">
-    {{ partial "search-input.html" . }}
-    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fa-solid fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
-    </button>
-  </form>
-
-  <nav class="collapse td-sidebar-nav pt-2 pl-4" id="td-section-nav">
-    <!-- {{ if  (gt (len .Site.Home.Translations) 0) }}
-    <div class="nav-item dropdown d-block d-lg-none">
-      {{ partial "navbar-lang-selector.html" . }}
-    </div>
-    {{ end }} -->
-    {{ template "blog-nav-section" (dict "page" . "section" .FirstSection "delayActive" $shouldDelayActive)  }}
-  </nav>
-</div>
-
-{{ define "blog-nav-section" }}
-
-{{ $shouldDelayActive := .delayActive }}
-{{ $sid := .section.RelPermalink | anchorize }}
-{{ $postsByYear := .section.Pages.GroupByDate "2006" }}
-
-  {{ range $postsByYear }}
-
-  {{ $year := .Key }}
-  {{ $p := $.page }}
-  {{ $active := eq ($p.Date.Format "2006") $year }}
-
-  {{ $firstPost := .Pages | first 1 }}
-    <ul class="td-sidebar-nav__section pr-md-3">
-      <li class="td-sidebar-nav__section-title">
-        <a  href="{{range $firstPost}}{{ .RelPermalink }}{{end}}" class="align-left pl-0 pr-2{{ if not $active }} collapsed{{ end }}{{ if $active}} active{{ end }} td-sidebar-link td-sidebar-link__section">
-          {{ $year }}
-        </a>
-
-      </li>
-      {{ $firstPages := .Pages | first 10 }}
-      {{ $remainingPages := .Pages | after 10 }}
-      {{ $displayRemainingPages := false }}
-      <ul>
-        {{ range $firstPages }}
-          {{ if .IsPage }}
-            <li class="blog-post collapse {{ if $active }}show{{ end }}" data-year={{$year}}>
-              {{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
-              {{ $active := eq . $p }}
-              <a class="td-sidebar-link td-sidebar-link__page {{ if and (not $shouldDelayActive) $active }} active{{ end }}" id="{{ $mid }}" href="{{ .RelPermalink }}">
-                {{ .LinkTitle }}
-              </a>
-            </li>
-          {{ end }}
-        {{ end }}
-        <li class="more-posts collapse {{ if $active }}show{{ end }}" data-year="{{$year}}">
-          <a class="td-sidebar-link" id="more-posts" href="">{{ T "blog_post_show_more" }}</a>
-        </li>
-        {{ range $remainingPages }}
-          {{ if .IsPage }}
-            <li class="blog-post hidden collapse" data-year={{$year}}>
-              {{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
-              {{ $active := eq . $p }}
-              <a class="td-sidebar-link td-sidebar-link__page {{ if and (not $shouldDelayActive) $active }} active{{ end }}" id="{{ $mid }}" href="{{ .RelPermalink }}">
-                {{ .LinkTitle }}
-              </a>
-            </li>
-          {{ end }}
-        {{ end }}
-      </ul>
-    </ul>
-
-  {{ end }}
-
-{{ end }}
-
-{{/* Reveal the remaining blog posts and hide the clicked link */}}
-<script>
-let morePosts = document.querySelectorAll(".more-posts");
-let year = "";
-morePosts.forEach(link => {
-  link.onclick = (e) => {
-    e.preventDefault();
-    year = link.dataset.year;
-    console.log(year);
-    let hiddenPosts = document.querySelectorAll(`.blog-post.hidden[data-year="${year}"]`);
-    console.log(hiddenPosts);
-    hiddenPosts.forEach(post => {
-      post.classList.add('show');
-      post.classList.remove("hidden");
-    });
-    link.style.display = "none";
-  }
-});
-</script>
\ No newline at end of file
+{{/* The "active" toggle here may delay rendering, so we only cache this side bar menu for bigger sites.
+*/}}{{ $sidebarCacheLimit := cond (isset .Site.Params.ui "sidebar_cache_limit") .Site.Params.ui.sidebar_cache_limit 2000 -}}
+{{ $shouldCache := ge (len .Site.Pages) $sidebarCacheLimit -}}
+{{ $sidebarCacheTypeRoot := cond (isset .Site.Params.ui "sidebar_cache_type_root") .Site.Params.ui.sidebar_cache_type_root false -}}
+{{ if $shouldCache -}}
+  {{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
+  <script>
+    $(function() {
+    $("#td-section-nav a").removeClass("active");
+    $("#td-section-nav #{{ $mid }}").addClass("active");
+    $("#td-section-nav #{{ $mid }}-li span").addClass("td-sidebar-nav-active-item");
+    $("#td-section-nav #{{ $mid }}").parents("li").addClass("active-path");
+    $("#td-section-nav li.active-path").addClass("show");
+    $("#td-section-nav li.active-path").children("input").prop('checked', true);
+    $("#td-section-nav #{{ $mid }}-li").siblings("li").addClass("show");
+    $("#td-section-nav #{{ $mid }}-li").children("ul").children("li").addClass("show");
+    $("#td-sidebar-menu").toggleClass("d-none");
+    });
+  </script>
+  {{ partialCached "blog-sidebar-tree.html" . .FirstSection.RelPermalink }}
+{{ else -}}
+  {{ partial "blog-sidebar-tree.html" . }}
+{{- end }}
\ No newline at end of file