Automatically collapse nested levels in TOC sidebar (pandas-dev#19)

Author: jorisvandenbossche

pandas-docs/source/_themes/bootstrap_docs_theme/docs-toc.html

@@ -3,10 +3,10 @@
 <nav id="bd-toc-nav">
     <ul class="nav section-nav flex-column">
     {% for item in page_toc.children recursive %}
-        <li class="toc-entry toc-h{{ loop.depth + 1 }}">
-            <a href="{{ item.url }}" class="nav-item nav-link">{{ item.title }}</a>
+        <li class="nav-item toc-entry toc-h{{ loop.depth + 1 }}">
+            <a href="{{ item.url }}" class="nav-link">{{ item.title }}</a>
         {%- if item.children -%}
-            <ul>
+            <ul class="nav section-nav flex-column">
                 {{ loop(item.children) }}
             </ul>
         {%- endif %}

pandas-docs/source/_themes/bootstrap_docs_theme/layout.html

@@ -54,7 +54,6 @@
 
       </div>
     </div>
+    {%- include "scripts.html" %}
+{%- endblock %}
 
-    {# %- include "scripts.html" % #}
-  </body>
-{%- endblock %}

pandas-docs/source/_themes/bootstrap_docs_theme/scripts.html

@@ -0,0 +1,21 @@
+<script>
+    // TOC sidebar - add "active" class to parent list
+    // 
+    // Bootstrap's scrollspy adds the active class to the <a> link,
+    // but for the automatic collapsing we need this on the parent list item.
+    // 
+    // The event is triggered on "window" (and not the nav item as documented),
+    // see https://github.com/twbs/bootstrap/issues/20086
+    $(window).on("activate.bs.scrollspy", function(){
+    var navLinks = document.querySelectorAll('#bd-toc-nav a');
+    for (var i = 0; i < navLinks.length; i++) {
+        var navLink = navLinks[i];
+        navLink.parentElement.classList.remove('active');
+    }
+    var navLinks = document.querySelectorAll('#bd-toc-nav a.active');
+    for (var i = 0; i < navLinks.length; i++) {
+        var navLink = navLinks[i];
+        navLink.parentElement.classList.add('active');
+    }
+    });
+</script>

pandas-docs/source/_themes/bootstrap_docs_theme/static/css/custom.css

@@ -223,4 +223,16 @@
 
 .nav-link:hover {
     border-style: none;
-}
+}
+
+
+/* Collapsing of the TOC sidebar while scrolling */
+
+/* Nav: hide second level (shown on .active) */
+.bd-toc .nav .nav {
+  display: none;
+}
+
+.bd-toc .nav > .active > ul {
+  display: block;
+}