diff --git a/doc/template.html b/doc/template.html
index a74a7b6a..645562bd 100644
--- a/doc/template.html
+++ b/doc/template.html
@@ -67,5 +67,37 @@ <h3 class="date">$date$</h3>
 $for(include-after)$
 $include-after$
 $endfor$
+<script type="text/javascript">
+  (function() {
+    // write out a basic 'dropdown_link' reference element
+    var dropdown_link = document.createElement('a');
+    dropdown_link.className = 'dropdown_link';
+    dropdown_link.innerHTML = '<b>+</b>&nbsp;';
+    dropdown_link.style.color = "#212121";
+    dropdown_link.style.cursor = 'pointer';
+    document.querySelectorAll('nav ul li > ul > li').forEach(
+			function(element) {
+      var dropdown_link_copy = dropdown_link.cloneNode(true);
+      var list = element.querySelector('ul');
+      if (!list)
+        return;
+      // add a clone of the node so the correct element is toggled
+      list.style.display = 'none';
+      element.setAttribute('state', 'up');
+      dropdown_link_copy.onclick = function() {
+        if (element.getAttribute('state') == 'down') {
+          element.setAttribute('state', 'up');
+          list.style.display = 'none';
+          dropdown_link_copy.querySelector('b').innerHTML = '+';
+        } else {
+          element.setAttribute('state', 'down');
+          list.style.display = 'block';
+          dropdown_link_copy.querySelector('b').innerHTML = '-';
+        }
+      }
+      element.insertBefore(dropdown_link_copy, element.querySelector('a'));
+    });
+  })();
+</script>
 </body>
 </html>