Allow toggel on whole title, add toggle transition

config/jsdoc/api/template/static/scripts/main.js

@@ -53,8 +53,7 @@ $(function () {
   }
 
   const search = (function () {
-    const $nav = $('.navigation');
-    const $navList = $nav.find('.navigation-list');
+    const $navList = $('.navigation-list');
     const navListNode = $navList.get(0);
     let $classItems;
     let $members;
@@ -74,7 +73,6 @@ $(function () {
     const $currentItem = $navList.find('.item[data-longname="' + longname + '"]:eq(0)');
     $currentItem.prependTo($navList);
     return {
-      $nav: $nav,
       $navList: $navList,
       $currentItem: $currentItem,
       lastSearchTerm: undefined,
@@ -93,13 +91,14 @@ $(function () {
         }
       },
       manualToggle: function ($node, show) {
+        $node.addClass('toggle-manual');
         $node.toggleClass('toggle-manual-hide', !show);
         $node.toggleClass('toggle-manual-show', show);
         manualToggles[$node.data('longname')] = $node;
       },
       clearManualToggles: function() {
         for (let clsName in manualToggles) {
-          manualToggles[clsName].removeClass('toggle-manual-show toggle-manual-hide');
+          manualToggles[clsName].removeClass('toggle-manual toggle-manual-show toggle-manual-hide');
         }
         manualToggles = {};
       },
@@ -240,7 +239,10 @@ $(function () {
   doSearch(searchInput.value);
 
   // Toggle when click an item element
-  search.$nav.on('click', '.toggle', function (e) {
+  search.$navList.on('click', '.toggle', function (e) {
+    if (event.target.tagName.toLowerCase() === 'a') {
+      return;
+    }
     const clsItem = $(this).closest('.item');
     let show;
     if (clsItem.hasClass('toggle-manual-show')) {

config/jsdoc/api/template/static/styles/jaguar.css

@@ -140,6 +140,19 @@ li {
   margin-right: 3px;
   flex-shrink: 0;
 }
+.navigation .item .glyphicon:before {
+  display: inline-block;
+}
+.navigation .item.toggle-manual .glyphicon:before {
+  transition: transform .1s;
+}
+.navigation .item-class.toggle-manual-show .glyphicon:before {
+  /* With 90deg the icon slightly slides left at transition end */
+  transform: rotate(89.9deg);
+}
+.navigation .item-module.toggle-manual-show .glyphicon:before {
+  transform: rotate(45deg);
+}
 
 .navigation li.perfect-match {
   border: 5px solid orange;

config/jsdoc/api/template/tmpl/navigation.tmpl

@@ -42,9 +42,9 @@ function listContent(item, title, listItemPrinter) {
     </div>
     <ul class="navigation-list search-empty"><?js
         this.nav.forEach(function (item) { ?>
-        <li class="item" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
-            <span class="title">
-                <span class="glyphicon <?js= getItemCssClass(item.type) ?> toggle"></span>
+        <li class="item item-<?js= item.type ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
+            <span class="title toggle">
+                <span class="glyphicon <?js= getItemCssClass(item.type) ?>"></span>
                 <span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~]/g, '\u200b$&')) ?></span>
             </span><?js
                 listContent(item, 'Members', printList);