sidebar toggle + scrolltobottom for trace on page load

css/area_sidetools.less

@@ -68,7 +68,7 @@
         border: 1px solid @color-border;
         background-color: @background_page-header;
         padding: .4rem;
-        max-height: 200px;
+        max-height: 6rem;
         overflow-y: auto;
         .bchead, .bcsep{
             display: none;

js/sidebar-menu.js

@@ -1,6 +1,34 @@
 ( function( $, spc ) {
 
-    var mainMenu = function(){
+    var addToggleLink = function($elem){
+            $elem.wrapInner('<a href="#toggleMenu" class="toggler"></a>');
+        },
+        toggleState = function($toggler){
+            $toggler.toggleClass('closed');
+            $toggler.toggleClass('opened');
+        },
+        focusFirstSubLink = function($elem, is2nd){
+
+            var $foc = (is2nd) ? $elem.find('a')[1] : $elem.find('a')[0];
+
+            if($foc){
+                $foc.focus();
+            }
+            return $foc;
+        },
+        focusLastSubLink = function($elem){
+
+            var $foc = $elem.find('a:last-child'),
+                height = $elem.find('p').scrollHeight;
+
+            if($foc){
+                $foc.focus();
+            }
+            $elem.scrollTop(height);
+            return $foc;
+        },
+
+        mainMenu = function(){
             var $menu = $('.nav-main').find('> ul');
 
             try{
@@ -8,19 +36,16 @@
                     var $toggler = $menu.find('> li.level1 > .li'),
                         $submenu = $menu.find('> li.level1 > ul');
                     if($toggler.length > 0 && $submenu.length > 0){
+
                         $toggler.addClass('closed');
-                    $toggler.wrapInner('<a href="#toggleMenu" class="toggler"></a>');
+                        addToggleLink($toggler);
                         $toggler.each(function( index ) {
                             $(this).on( "click", function(e) {
                                 e.preventDefault();
                                 var $this = $(this);
-                            $this.toggleClass('closed');
+                                toggleState($this);
-                            $this.toggleClass('opened');
                                 if($this.hasClass('opened')){
-                                var $foc = $this.closest('li.level1').find('li.level2:first-child').find('a:first-child');
+                                    var $foc = focusFirstSubLink($this.closest('li.level1'), true);
-                                if($foc.length > 0){
-                                    $foc.focus();
-                                }
                                 }
                             });
                         });
@@ -34,39 +59,37 @@
             }catch(err){
 
             }
-    };
+        },
-
+        sideMenu = function(){
-    var sideMenu = function(){
+            var $menus = $('.tools').find('.toggle-menu');
-        var $menu = $('.tools').find('.toggle-menu');
 
 
             try{
+                $menus.each(function( ) {
+                    var $menu = $(this);
                     if($menu.length > 0){
                         var $toggler = $menu.find('h6'),
-                    $submenu = $menu.find('nav > ul >li, nav > div');
+                            $submenu = $menu.find('nav > ul, nav > div');
-                if($toggler.length > 0 && $submenu.length > 0){
+                        if($toggler.length > 0 && $submenu.length > 0) {
+
                             $toggler.addClass('closed');
-                    $toggler.wrapInner('<a href="#toggleMenu" class="toggler"></a>');
+                            addToggleLink($toggler);
-                    $toggler.each(function( index ) {
+                            $toggler.each(function (index) {
-                        $(this).on( "click", function(e) {
+                                $(this).on("click", function (e) {
                                     e.preventDefault();
                                     var $this = $(this);
-                            $this.toggleClass('closed');
+                                    toggleState($this);
-                            $this.toggleClass('opened');
+                                    if ($this.hasClass('opened')) {
-                            if($this.hasClass('opened')){
+                                        var $elem = ($submenu.is('div')) ? focusLastSubLink($submenu): focusFirstSubLink($submenu,false);
-                                var $foc = $this.closest('li.level1').find('li.level2:first-child').find('a:first-child');
-                                if($foc.length > 0){
-                                    $foc.focus();
-                                }
                                     }
                                 });
                             });
 
                             //FIXME: store current nav state with local storage
                         }
-
-
                     }
+                });
+
 
             }catch(err){
                 alert('err');

script.js

@@ -24,13 +24,11 @@
 
 } )( jQuery, spc, wikiLang );
 
-
 /* DOKUWIKI:include js/plugins/do_tasks.js */
 
+
+
 /* DOKUWIKI:include js/sidebar-menu.js */
 
 
 
-
-
-