Cleanup docs menu collapse

_layouts/docs.html

@@ -115,22 +115,39 @@
             return itemDom;
         }
 
+        // Flush css changes as explained in: https://stackoverflow.com/a/34726346
+        // and more completely: https://stackoverflow.com/a/6956049
+        function flushCss(element) {
+            element.offsetHeight;
+        }
+
         function addArrow(itemDom) {
             var arrowDom = document.createElement('a');
             arrowDom.classList.add('arrow');
+            arrowDom.innerHTML = '<div />';
             arrowDom.onclick = function(itemDom) {
                 return function () {
-                    var fullHeight = 59 + 16 + itemDom.lastChild.clientHeight + 'px';
+                    var MAIN_ITEM_HEIGHT = 59;
+                    var BOTTOM_PADDING = 16;
+
+                    // Calculated full height of the opened list
+                    var fullHeight = MAIN_ITEM_HEIGHT + BOTTOM_PADDING + itemDom.lastChild.clientHeight + 'px';
+
                     itemDom.classList.toggle('open');
+
                     if (itemDom.classList.contains('open')) {
                         itemDom.style.height = fullHeight;
                     } else {
+                        // If the list height is auto we have to set it to fullHeight
+                        // without tranistion before we shrink it to collapsed height
                         if (itemDom.style.height === 'auto') {
+                            itemDom.style.transition = 'none';
                             itemDom.style.height = fullHeight;
-                        }
+                            flushCss(itemDom);
-                        setTimeout(function () { itemDom.style.height = '59px'; }, 10);
+                            itemDom.style.transition = '';
+                        } 
+                        itemDom.style.height = '59px';
                     }
-                    window.itemDom = itemDom;
 
                     return false;
                 };

css/docs.scss

@@ -114,7 +114,7 @@ pre > code {
   margin-left: auto;
   margin-right: auto;
   padding: 0 $page-padding 30px;
-  min-height: calc(100% - 374px);
+  min-height: calc(100% - 338px);
   color: #505a72;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -220,6 +220,11 @@ pre > code {
     & > li {
       transition: height 0.3s ease-in-out;
       overflow: hidden;
+      height: 59px;
+
+      &.open {
+        height: auto;
+      }
     }
   }
 
@@ -250,28 +255,27 @@ pre > code {
       }
 
       & > a.arrow {
-        background-image: url(/images/arrow-down.svg);
-        background-repeat: no-repeat;
-        background-position: center;
-        width: 20px;
-        height: 20px;
         float: right;
         margin-top: 18px;
         margin-right: 8px;
-        display: none;
         cursor: pointer;
-        transition: transform 0.3s ease-in-out;
+        width: 20px;
+        height: 20px;
+
+        div {
+          background-image: url(/images/arrow-down.svg);
+          background-repeat: no-repeat;
+          background-position: center;
+          width: 20px;
+          height: 20px;
+          transition: transform 0.3s ease-in-out;
+        }
       }
 
-      &.open > a.arrow {
+      &.open > a.arrow div {
-        // background-image: url(/images/arrow-up.svg);
         transform: rotateX(180deg);
       }
 
-      &.children > a.arrow {
-        display: inline-block;
-      }
-
       ul {
         margin-bottom: 16px;
       }

images/arrow-up.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8">
-    <path fill="none" fill-rule="evenodd" stroke="#505A72" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 7L7 1 1 7"/>
-</svg>