metabox part 3

css/area_nav-metabox.less

@@ -59,6 +59,8 @@
                 }
             }
             &.active > a {
+                cursor: default;
+                tab-index: -1;
                 color: #555;
                 background-color: @background_page-header;
                 border-color: transparent;
@@ -98,21 +100,24 @@
                     padding-left: .5em;
                     a {
                         font-size: .78rem;
+                        display: inline-block;
+                        padding-left: 10px;
+                        position: relative;
                     }
                     li {
                     }
                     div.li {
                         position: relative;
                         ::before {
-                            position: relative;
+                            position: absolute;
-                            top: -.2em;
+                            top: .3em;
                             content: "";
                             display: inline-block;
                             width: 4px;
                             height: 4px;
-                            margin-right: .3rem;
+                            background-color: #ccc;
-                            background-color: @color-border;
                             overflow: hidden;
+                            left: 0;
                         }
                         padding: .15em 0;
                     }

js/meta-box.js

@@ -0,0 +1,41 @@
+(function ($, spc) {
+
+    var toggleTabs = function () {
+
+        var $metaBox = $('#meta-box'),
+            $tabLinks = $metaBox.find('.meta-tabs').find('a'),
+            $tabPanels = $metaBox.find('.meta-content').find('.tab-pane');
+
+            try {
+                $tabLinks.each(function () {
+                    $(this).on("click", function (e) {
+                        e.preventDefault();
+                        var $link = $(this),
+                            $panel = $($link.attr('href'));
+
+                        //reset
+                        resetTabs();
+
+                        //current state
+                        $link.addClass('active').attr('aria-expanded','true');
+                        $panel.addClass('active').attr('aria-hidden','false');
+                    });
+                });
+
+
+            } catch (err) {
+                alert('err');
+            }
+        },
+        resetTabs = function($tabLinks,$tabPanels){
+            $tabLinks.closest('li').removeClass('active');
+            $tabLinks.attr('aria-expanded','false');
+            $tabPanels.removeClass('active').attr('aria-hidden','true');
+        };
+
+    $(function () {
+        toggleTabs();
+    });
+
+})(jQuery, spc);
+

js/sidebar-menu.js

@@ -92,7 +92,7 @@
 
 
             }catch(err){
-                alert('err');
+                //console.log('err');
             }
         };
 

script.js

@@ -26,9 +26,7 @@
 
 /* DOKUWIKI:include js/plugins/do_tasks.js */
 
-
-
 /* DOKUWIKI:include js/sidebar-menu.js */
-
+/* DOKUWIKI:include js/meta-box.js */
 
 

tpl/nav-meta-box.php

@@ -1,21 +1,27 @@
+<?php
+    if (!defined('DOKU_INC')) die();
+
+?>
 <div class="tab-container">
     <ul class="meta-tabs">
-        <!--<li class="active"><a data-toggle="tab" href="#tab1" aria-expanded="true"><span class="prefix">Sitemap</span><span class="num"></span></a></li>-->
+
-        <li><a data-toggle="tab" href="#tab1" aria-expanded="false"><span class="prefix">Sitemap</span><span class="num"></span></a></li>
+        <li><a href="#tab1" aria-expanded="false"><span class="prefix">Sitemap</span><span class="num"></span></a></li>
-        <li><a data-toggle="tab" href="#tab2" aria-expanded="false"><span class="prefix">Tags</span><span class="num"></span></a></li>
+        <?php if ($tags !== null) { ?><li><a href="#tab2" aria-expanded="false"><span class="prefix">Tags</span><span class="num"></span></a></li><?php } ?>
-        <li><a data-toggle="tab" href="#tab3" aria-expanded="false"><span class="prefix">Jira</span><span class="num"></span></a></li>
+        <li><a href="#tab3" aria-expanded="false"><span class="prefix">Jira</span><span class="num"></span></a></li>
 
     </ul>
 
     <div class="meta-content">
         <div class="box-content">
-            <div id="tab1" class="tab-pane"> <!-- .active -->
+            <div id="tab1" class="tab-pane" aria-hidden="true">
                 <?php  tpl_toc(); ?>
             </div>
-            <div id="tab2" class="tab-pane">
+            <?php if ($tags !== null) { ?>
-
+                <div id="tab2" class="tab-pane" aria-hidden="true">
-            </div>
+                    <?php $tags->tpl_tags(); ?>
-            <div id="tab3" class="tab-pane">
+                </div>
+            <?php } ?>
+            <div id="tab3" class="tab-pane" aria-hidden="true">
 
             </div>
         </div>