diff --git a/base.html b/base.html
index b1931f2..bdcee36 100644
--- a/base.html
+++ b/base.html
@@ -33,6 +33,9 @@
     var mkdocs_page_name = "{{ page_title }}";
     var mkdocs_page_input_path = "{{ current_page.input_path }}";
     var mkdocs_page_url = "{{ current_page.abs_url }}";
+
+    var ooahel = '{{page.url}}';
+    
   </script>
   {% endif %}
   <script src="{{ base_url }}/js/jquery-2.1.1.min.js"></script>
@@ -114,16 +117,30 @@
 <!-- {% include "versions.html" %} -->
 
 <script type="text/javascript">
-  // If cookie is defined toggle the id
-  if (typeof $.cookie('docToggle') !== 'undefined') {
-      // Parse cookie which is an array
-      var _parsed_cookie = JSON.parse($.cookie('docToggle'));
-      // Loop over array and show hidden divs
-      $.each(_parsed_cookie, function(index, value) {
-          // Toggle
-          $("[id='hidden_" + value + "']").css('display','');
-      })
+    // If cookie is defined toggle the id
+    if (typeof $.cookie('docToggle') !== 'undefined') {
+        // Parse cookie which is an array
+        var _parsed_cookie = JSON.parse($.cookie('docToggle'));
+        // Loop over array and show hidden divs
+        $.each(_parsed_cookie, function(index, value) {
+            // Toggle
+            $("[id='hidden_" + value + "']").css('display','');
+            $("[id='"+ value + "_butt']").removeClass("fa-plus-square").addClass("fa-minus-square");
+
+        });
+        //scroll to the correct item in the menu
+        var remSlash = /\//g;
+        var remDot = /\./g;
+        var remDash = /-/g;
+
+        var currentNav = mkdocs_page_url.replace(remSlash,'').replace('index.html','').replace(remDot,'').replace(remDash,'_');
+        //now scroll to the position of the nav
+        var pos = $('#'+currentNav).offset().top - 50;
+        $('nav').animate({scrollTop: pos},'fast');
   }
+  
+  
+  //
 </script>
 
 </body>
diff --git a/js/nav.js b/js/nav.js
index 53c15e5..db38629 100644
--- a/js/nav.js
+++ b/js/nav.js
@@ -1,26 +1,32 @@
 // Function to show children
 function showChildren(id) {
-    // Toggle
-    $("[id='hidden_" + id + "']").toggle();
+    //get the jquery object, the menu item
+    var navObj = $("[id='hidden_" + id + "']");
+    var toggleMenuObj = $("[id='"+id + "_butt']");
+    
+    // Toggle, show or hide the menu item
+    navObj.toggle();
+    toggleMenuObj.toggleClass("fa-plus-square").toggleClass("fa-minus-square");
+    
     // Set cookie
-    if (typeof $.cookie('docToggle') === 'undefined') {
-        var _cookie = [];
-    }
-    else {
-        var _cookie = JSON.parse($.cookie('docToggle'));
-    }
+    var _cookie = (typeof $.cookie('docToggle') === 'undefined')?[]:JSON.parse($.cookie('docToggle'));
+    
     // Check if div is now closed
-    var _visible = $("[id='hidden_" + id + "']").is(':visible');
+    var _visible = navObj.is(':visible');
+    
     // if div is show we add value to cookie
     if (_visible) {
-        // Make sure the value is not already in the array. this also pushed the value to the array
+        // Make sure the value is not already in the array. this also pushed the value to the array, and change the nev element to minus
         _addToSet(_cookie, id);
+        toggleMenuObj.removeClass("fa-plus-square").addClass("fa-minus-square");
     }
-    // remove value
+    // remove value from cookie if it is closed, and change the nav element to plus
     else {
         _removeFromSet(_cookie, id);
+        toggleMenuObj.removeClass("fa-minus-square").addClass("fa-plus-square");
     }
-    // Set cookie
+    
+    // Set cookie in the browser
     $.cookie('docToggle', JSON.stringify(_cookie), { expires: 7, path: '/' });
     // Return
     return false;
diff --git a/toc.html b/toc.html
index 3f83905..4806329 100644
--- a/toc.html
+++ b/toc.html
@@ -1,22 +1,106 @@
+
 <ul class="subnav">
     <li class="{% if nav_item.active%}current{%endif%}">
-        <a class="{% if nav_item.active%}current{%endif%}" {% if not nav_item.children%}href="{{ nav_item.url }}"{%endif%} id="{{ nav_item.title }}" style="font-size:95%;font-weight:bold;">{{ nav_item.title }}</a>
+        <a class="{% if nav_item.active%}current{%endif%}"
+           {% if not nav_item.children%}href="{{ nav_item.url }}"{%endif%}
+           id="{{ nav_item.url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") }}"
+           style="font-size:95%;font-weight:bold;">
+                {{ nav_item.title }}
+    </a>
     </li>
     {% for nav_item in nav_item.children %}
         <li class="{% if nav_item.active%}current{%endif%}">
-            <a style="padding-left:50px;" class="{% if nav_item.active%}current{%endif%}" {% if not nav_item.children%}href="{{ nav_item.url }}"{%endif%} id="{{ nav_item.title }}"{% if nav_item.children%} onclick="showChildren('{{ nav_item.title }}')"{%endif%}>{{ nav_item.title }} {% if nav_item.children%} <i class="fa fa-arrow-circle-down" style="padding-left:5px;font-size:13px;"></i>{%endif%}</a>
+            {# setup the id for the first child to use to open on load and scroll to, see nav.js and base.html at bottom of page #}
+            {% if nav_item.children %}
+                {% set childaID = nav_item.title|replace(" ", "_") %}
+            {%else%}
+                {% if nav_item.active%} 
+                    {% set childaID = current_page.abs_url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
+                {%else%} 
+                    {% set childaID = nav_item.url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
+                {%endif%}
+            {%endif%}
+            <a style="padding-left:50px;"
+               class="{% if nav_item.active%}current{%endif%}"
+               {% if not nav_item.children%}href="{{ nav_item.url }}"{%endif%}
+               id="{{ childaID }}"
+               {% if nav_item.children%} onclick="showChildren('{{ childaID }}')"{%endif%}>
+                  {% if nav_item.children%} 
+                    <i class="fa fa-plus-square" id="{{ childaID }}_butt" style="padding-left:5px;font-size:13px;"></i>
+                {%endif%} 
+                {{ nav_item.title }} 
+            </a>
         </li>
-        {% set id_hidden = nav_item.title %}
+        
+{# calculate the sub-menu to show and hide. This is a second level menu so Parent:(root) > Child:(sub-menu) #}
+{# the id of the  being hidden_[name] is toggled with the call to showChildren from the child element above  #}
+{# the id is calculated thus: hidden_parentUrlOrTitle #}
+        {% if nav_item.children %}
+            {% set id_hidden = nav_item.title|replace(" ", "_") %}
+        {%else%}
+            {% if nav_item.active%} 
+                {% set id_hidden = current_page.abs_url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
+            {%else%} 
+                {% set id_hidden = nav_item.url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
+            {%endif%}
+        {%endif%}
+        
         <div style="display:none" id="hidden_{{ id_hidden }}">
         {% for nav_item in nav_item.children %}
+            {# childbID is the id of this specific child element, used in conjunction with the parent id_hidden #}
+            {% if nav_item.children %}
+                {% set childbID = nav_item.title|replace(" ", "_") %}
+            {%else%}
+                {% if nav_item.active%} 
+                    {% set childbID = current_page.abs_url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
+                {%else%} 
+                    {% set childbID = nav_item.url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
+                {%endif%}
+            {%endif%}
             <li class="{% if nav_item.active%}current{%endif%}">
-                <a style="padding-left:70px;" class="{% if nav_item.active%}current{%endif%}" {% if not nav_item.children%}href="{{ nav_item.url }}"{%endif%} id="{{ nav_item.title }}"{% if nav_item.children%} onclick="showChildren('{{ id_hidden }}{{ nav_item.title }}')"{%endif%}>{{ nav_item.title }} {% if nav_item.children%} <i class="fa fa-arrow-circle-down" style="padding-left:5px;font-size:13px;"></i>{%endif%}</a>
+                <a style="padding-left:70px;" 
+                   class="{% if nav_item.active%}current{%endif%}" 
+                   {% if not nav_item.children%}href="{{ nav_item.url }}"{%endif%} 
+                   id="{{childbID}}"
+                   {% if nav_item.children%} onclick="showChildren('{{ id_hidden }}{{childbID}}')"{%endif%}>
+                        {% if nav_item.children%} 
+                          <i class="fa fa-plus-square" id="{{ id_hidden }}{{childbID}}_butt" style="padding-left:5px;font-size:13px;"></i>
+                        {%endif%} 
+                        {{ nav_item.title }}
+                </a>
             </li>
-            {% set id_hidden = id_hidden + nav_item.title %}
-            <div style="display:none" id="hidden_{{ id_hidden }}">
+{# calculate the sub-menu to show and hide. This is a second level menu so Parent:(root) > Child:(sub-menu) > Grandchild:(2nd level) #}
+{# the id of the  being hidden_[name] is toggled with the call to showChildren from the child element above  #}
+{# the id is calculated thus: hidden_parentUrlOrTitle_childUrlOrTitle #}
+{# ToDo: make recursive function to allow for unlimited depth of menus  #}
+            {% if nav_item.children %}
+                {% set id_hidden = id_hidden + nav_item.title|replace(" ", "_") %}
+            {%else%}
+                {% if nav_item.active%} 
+                    {% set id_hidden = id_hidden + current_page.abs_url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
+                {%else%}
+                    {% set id_hidden = id_hidden + nav_item.url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
+                {%endif%}
+            {%endif%}
+            
+            <div style="display:none;" id="hidden_{{ id_hidden }}">
             {% for nav_item in nav_item.children %}
+                {% if nav_item.active%} 
+                    {% set childcID = current_page.abs_url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
+                {%else%}
+                    {% set childcID = nav_item.url|replace("/","")|replace("index.html","")|replace(".","")|replace("-","_") %}
+                {%endif%}
                 <li class="{% if nav_item.active%}current{%endif%}">
-                    <a style="padding-left:90px;" class="{% if nav_item.active%}current{%endif%}" {% if not nav_item.children%}href="{{ nav_item.url }}"{%endif%} id="{{ nav_item.title }}"{% if nav_item.children%} onclick="showChildren('{{ id_hidden }}')"{%endif%}>{{ nav_item.title }} {% if nav_item.children%} <i class="fa fa-arrow-circle-down" style="padding-left:5px;font-size:13px;"></i>{%endif%}</a>
+                    <a style="padding-left:90px;"
+                       class="{% if nav_item.active%}current{%endif%}"
+                       {% if not nav_item.children%}href="{{ nav_item.url }}"{%endif%}
+                       id="{{childcID}}"
+                       {% if nav_item.children%} onclick="showChildren('{{ id_hidden }}')"{%endif%}>
+                            {% if nav_item.children%} 
+                                <i class="fa fa-plus-square" id="{{id_hidden}}_butt" style="padding-left:5px;font-size:13px;"></i>
+                            {%endif%} 
+                            {{ nav_item.title }}
+                    </a>
                 </li>
             {% endfor %}
             </div>