final logic for tocs' accordion

extensions/odoo_theme/__init__.py

@@ -39,9 +39,7 @@ class Monkey(object):
 def resolve(old_resolve, tree, docname, *args, **kwargs):
     resolved_toc = old_resolve(tree, docname, *args, **kwargs)
     if resolved_toc:
-        # Not sure set_class really does what we want.
         _toctree_add_empty_class(tree, resolved_toc, docname)
-        resolved_toc['classes'].append('testtesttest')
     return resolved_toc
 
 def _toctree_add_empty_class(tree, node, docname) -> None:
@@ -57,6 +55,7 @@ def _toctree_add_empty_class(tree, node, docname) -> None:
             toc_ref = get_reference(subnode, docname)
             if toc_ref and 'empty_page' in tree.env.metadata[toc_ref]:
                 subnode['classes'].append('o_empty_page')
+                subnode['refuri'] = '#'  # The link must not be clickable
 
 def get_reference(node, docname):
     ref = node['refuri'].replace('.html', '') # applications.html

extensions/odoo_theme/static/js/menu.js

@@ -17,19 +17,29 @@
     /**
      * Add the relevant classes on the TOC entries (and lists) whose page is displayed.
      *
-     * TOC entries whose page is displayed (<li> elements) receive the `o_active_toc_entry` class
-     * and their related TOC entry list (<ul> elements) receive the `show` (Bootstrap) class.
+     * TOC entries (<li> elements) that are on the path of the displayed page receive the
+     * `o_active_toc_entry` class, and their related (parent) TOC entry list (<ul> elements) receive
+     * the `show` (Bootstrap) class. The child TOC entry list of the deepest TOC entry also
+     * receives the `show` class.
      */
     const _flagActiveTocEntriesAndLists = () => {
+        let deepestTocEntry = undefined;
         this.navigationMenu.querySelectorAll('.current').forEach(element => {
-            if (element.tagName === 'LI') {
-                // Highlight all <li> in the active hierarchy
-                element.classList.add('o_active_toc_entry');
-            } else if (element.tagName === 'UL') {
+            if (element.tagName === 'UL') {
                 // Expand all related <ul>
                 element.classList.add('show');
+            } else if (element.tagName === 'LI') {
+                // Highlight all <li> in the active hierarchy
+                element.classList.add('o_active_toc_entry');
+                deepestTocEntry = element;
             }
         })
+        if (deepestTocEntry) {
+            const childTocEntryList = deepestTocEntry.querySelector('ul');
+            if (childTocEntryList) {
+                childTocEntryList.classList.add('show');
+            }
+        }
     };
 
     /**

extensions/odoo_theme/static/js/utils.js

@@ -18,13 +18,21 @@ let tocEntryListId = 0;  // Used to generate IDs of toc entry lists for both the
  * elements followed by a <ul>, we simply loop on <ul> elements to access all parts of the DOM
  * that need to be modified.
  *
- * For a given <a> and <ul> pair, the final structure must look like this:
- * <div class="o_toc_entry_wrapper">
- *     <i data-bs-target="#o_target_heading_with_children" data-bs-toggle="collapse"
- *        class="i-chevron-right"/>
- *     <a href="#heading_with_children"/>
- * </div>
- * <ul id="o_target_heading_with_children" class="collapse">...</ul>
+ * The final structure must look like this:
+ * <ul><li>
+ *     <!-- Only <a> element with empty href must expand/collapse on click -->
+ *     <a href="#" data-bs-target="#o_target_{id}>" data-bs-toggle="collapse"/>
+ *     <ul>
+ *         <li><a href="#heading_without_child"/></li>
+ *         <li>
+ *             <div class="o_toc_entry_wrapper">
+ *                 <i class="i-chevron-right" data-bs-target="#o_target_{id}" data-bs-toggle="collapse"/>
+ *                 <a href="#heading_with_children"/>
+ *             </div>
+ *             <ul id="o_target_{id}" class="collapse">...</ul>
+ *         </li>
+ *     </ul>
+ * </li></ul>
  *
  * @param {HTMLElement} tocElement - The element containing the TOC
  */
@@ -40,11 +48,17 @@ const _prepareAccordion = (tocElement) => {
         arrowButton.setAttribute('data-bs-target', `#${tocEntryList.id}`);
         arrowButton.setAttribute('data-bs-toggle', 'collapse');
         arrowButton.classList.add('i-chevron-right');
+        // Modify the <a> element (only if it has no href, otherwise let the redirection happen)
+        const relatedHeadingRef = tocEntryList.previousSibling;
+        if (relatedHeadingRef.getAttribute('href') === '#') {
+            relatedHeadingRef.setAttribute('data-bs-target', `#${tocEntryList.id}`);
+            relatedHeadingRef.setAttribute('data-bs-toggle', 'collapse');
+        }
         // Create a <div> element
         const tocEntryWrapper = document.createElement('DIV');
         tocEntryWrapper.classList.add('o_toc_entry_wrapper');
         // Insert the <i> and <a> elements inside the <div> and prepend the <div> to the <ul>
-        tocEntryWrapper.append(arrowButton, tocEntryList.previousSibling);
+        tocEntryWrapper.append(arrowButton, relatedHeadingRef);
         tocEntryList.parentNode.insertBefore(tocEntryWrapper, tocEntryList);
     });
 };

requirements.txt

@@ -1,3 +1,4 @@
+docutils~=0.14
 pygments~=2.6.1
 pysass~=0.1.0
 sphinx~=3.0