<style> .doco-list-group-item > a { font-weight: bold; } .sub-menu { margin: 3px 0px 10px 10px; } #doco-content h1 { border-bottom: #cccccc thin solid; padding-bottom: 0.3em; } #region_1 .widget ul ul { list-style-type: none; } .toc-content li, #doco-top-toc li { padding: 3px 0px; } </style> <div class="" id="accordion"> <div class="panel"> <div class=""> <h3 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#about"> About</a> </h3> </div> <div id="about" class="panel-collapse collapse in"> <ul class="list-group"> <li class="doco-list-group-item"><a href="/help/about/about_hubzilla">Hubzilla project</a></li> <li class="doco-list-group-item"><a href="/help/about/about_hub">About this hub</a></li> </ul> </div> </div> <div class="panel"> <div class=""> <h3 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#members"> Members</a> </h3> </div> <div id="members" class="panel-collapse collapse in"> <ul class="list-group"> <li class="doco-list-group-item"><a href="/help/member/member_guide">Guide</a></li> <li class="doco-list-group-item"><a href="/help/member/member_faq">FAQ</a></li> </ul> </div> </div> <div class="panel"> <div class=""> <h3 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#administrators"> Administrators</a> </h3> </div> <div id="administrators" class="panel-collapse collapse in"> <ul class="list-group"> <li class="doco-list-group-item"><a href="/help/admin/administrator_guide">Guide</a></li> <li class="doco-list-group-item"><a href="/help/admin/hub_snapshots">Hub Snapshots</a></li> </ul> </div> </div> <div class="panel"> <div class=""> <h3 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#developers"> Developers</a> </h3> </div> <div id="developers" class="panel-collapse collapse in"> <ul class="list-group"> <li class="doco-list-group-item"><a href="/help/developer/developer_guide">Guide</a></li> <li class="doco-list-group-item"><a href="/help/developer/api_zot">Zot API</a></li> </ul> </div> </div> <div class="panel"> <div class=""> <h3 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#tutorials"> Tutorials</a> </h3> </div> <div id="tutorials" class="panel-collapse collapse in"> <ul class="list-group"> <li class="doco-list-group-item"><a href="/help/tutorials/personal_channel">Personal Channel</a></li> </ul> </div> </div> </div> <script> // Generate the table of contents in the side nav menu (see view/tpl/help.tpl) $(document).ready(function () { $(".panel-collapse.in").find('a').each(function(){ window.console.log($(this).attr('href')); var url = document.createElement('a'); url.href = window.location; var pageName = url.href.split('/').pop().split('#').shift(); window.console.log('pageName: ' + pageName); var linkName = $(this).attr('href').split('/').pop(); window.console.log('linkName: ' + linkName); if(pageName === linkName) { var tocUl = $(this).closest('li').append('<ul>').find('ul'); tocUl.removeClass(); // Classes are automatically added to <ul> elements by something else tocUl.toc({content: "#doco-content", headings: "h1"}); tocUl.addClass('toc-content sub-menu'); tocUl.attr('id', 'doco-side-toc'); } }); $(document.body).trigger("sticky_kit:recalc"); }); </script>