diff --git a/layouts/partials/docs-side-nav.html b/layouts/partials/docs-side-nav.html
index 978c4438329..fd157ef7376 100644
--- a/layouts/partials/docs-side-nav.html
+++ b/layouts/partials/docs-side-nav.html
@@ -1,70 +1,24 @@
-<!-- {{ range .Data.Pages.GroupBy "Section" }}
-  <h3>{{ .Key }}</h3>
-  <ul class="unstyled">
-      {{ range .Pages }}
-      <li>
-      <a href="{{ .Permalink }}">{{ .Title }}</a>
-      </li>
-      {{ end }}
-  </ul>
-{{ end }}
- -->
 <h3>{{ .Title }}</h3>
 
-  <div class="tree-nav">
-    <ul>
-      <!-- <li><a href="{{ .RelPermalink}}">Home</a></li> -->
-      <ul>
-        {{ template "section-tree-nav" ($.Scratch.Get "secondLevel") }}
- }}
-      </ul>
-    </ul>
-  </div>
-  {{ define "section-tree-nav" }}
+<div class="tree-nav">
+  <ul>
+    {{ template "section-tree-nav" ($.Scratch.Get "secondLevel") }}
+  </ul>
+</div>
+{{ define "section-tree-nav" }}
   {{ range .Sections}}
-<!--   <li> -->
-    <li class="bg-white"><a href="{{ .RelPermalink}}">{{ .Title }}<i class="material-icons pull-right">keyboard_arrow_down</i></a>
-      <ul>
-        {{ range .Pages }}
-        <li class="bg-white"><a href="{{ .RelPermalink}}">{{ .Title }}</a></li>
-        {{ end }}
-        <ul>
-        {{ template "section-tree-nav" . }}
+    <li class="tree-nav-item bg-white"><a href="{{ .RelPermalink}}">{{ .Title }}</a>
+      {{if gt (len .Sections) 0}}
+        <i class="material-icons pull-right expand-more">expand_more</i>
+        <ul class="tree-nav-sublist hide">
+          {{ range .Pages }}
+          <li class="tree-nav-item-child bg-white"><a href="{{ .RelPermalink}}">{{ .Title }}</a></li>
+          {{ end }}
+          <ul>
+            {{ template "section-tree-nav" . }}
+          </ul>
         </ul>
-      </ul>
+      {{end}}
     </li>
-<!--   </li> -->
   {{ end }}
 {{ end }}
-
-
-<!--old sidebar-->
-<!-- <div class="bg-default p-a-md">
-  <h4>{{ .Section }}</h4>
-  {{ $page := . }}
-  <ul>
-  {{ range where .Site.Pages "Section" .Section }}
-    {{ $child := . }}
-    {{ if .IsDescendant $page }}
-      <li class="row aside-item">
-        <div class="bg-accent col-md row middle-md center-md"><i class="material-icons">folder</i></div>
-        <div class="col-md aside-info">
-          <a href="{{ .URL }}">{{ .Title }}
-          {{ if .IsAncestor $child }}
-              <i class="material-icons pull-right">keyboard_arrow_down</i>
-          {{ end }}
-          </a>
-        </div>
-        <ul>
-        {{ range where .Site.Pages "Section" .Section }}
-          {{ if .IsDescendant $child }}
-            <li><a href="{{ .URL }}">{{.Title}}</a></li>
-          {{ end }}
-        {{ end }}
-        </ul>
-
-      </li>
-    {{ end }}
-  {{ end }}
-</div>
- -->
diff --git a/src/js/app.js b/src/js/app.js
index 352f39b3d83..87b3c3fba51 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -177,12 +177,32 @@ const bootstrapSorts = function() {
 }
 
 const bootstrapNav = function () {
-  // debugger;
+  // mobile nav
   // init-attaches to js object
   mlStackNav();
   // consume
   $(".js-ml-stack-nav").mlStackNav();
+
+  // sidenav
+  $('.tree-nav .tree-nav-item').on('click', function(e) {
+    // actual clicked element
+    let target = e.target;
+
+    if (!target.href) {
+      // stop it from affecting other nodes
+      e.preventDefault();
+      e.stopPropagation();
+
+      // parent li rather then actual el clicked
+      $(e.currentTarget).toggleClass('open');
+
+      $(e.target).find('>ul.tree-nav-sublist').toggleClass('hide');
+    }
+
+  });
 }
+
+
 bootstrapNav();
 bootstrapDropdowns();
 bootstrapModals();
diff --git a/src/sass/app.scss b/src/sass/app.scss
index 3e0f24e0e99..ed371b2deff 100644
--- a/src/sass/app.scss
+++ b/src/sass/app.scss
@@ -58,3 +58,22 @@
   visibility: hidden;
   display: none;
 }
+
+.tree-nav {
+  .tree-nav-item {
+    .tree-nav-sublist {
+      &.hide {
+        display: none;
+      }
+    }
+    &.open {
+      >.expand-more {
+        -webkit-transform: rotate(180deg);
+        -moz-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+        -o-transform: rotate(180deg);
+        transform: rotate(180deg);
+      }
+    }
+  }
+}