hubzilla_ynh/sources/doc/toc.html

<div class="" id="accordion">
    <div class="panel">
        <div class="">
            <h3 class="panel-title">
                    About
            </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">About Hubzilla</a></li>
                <li class="doco-list-group-item"><a href="/help/about/hubzilla_project">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">
                    Members
            </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/bbcode">BBcode Reference</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">
                    Administrators
            </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">
                    Developers
            </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/zot_protocol">Zot Protocol</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">
                    Tutorials
            </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>
	toc = {};
    // 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: "h3"});
                tocUl.addClass('toc-content sub-menu');
		tocUl.attr('id', 'doco-side-toc');

            }
        });
		
		$(document.body).trigger("sticky_kit:recalc");

		toc.contentTop = [];
		toc.edgeMargin    = 20;   // margin above the top or margin from the end of the page
		toc.topRange      = 200;  // measure from the top of the viewport to X pixels down
		// Set up content an array of locations
		$('#doco-side-toc').find('a').each(function(){
			toc.contentTop.push( $( '#'+$(this).attr('href').split('#').pop() ).offset().top );
		});


		// adjust side menu
		$(window).scroll(function(){
			var winTop = $(window).scrollTop(),
				bodyHt = $(document).height(),
				vpHt = $(window).height() + toc.edgeMargin;  // viewport height + margin
			$.each( toc.contentTop, function(i,loc){
			 if ( ( loc > winTop - toc.edgeMargin && ( loc < winTop + toc.topRange || ( winTop + vpHt ) >= bodyHt ) ) ){
			  $('#doco-side-toc li')
			   .removeClass('selected-doco-nav')
			   .eq(i).addClass('selected-doco-nav');
			 }
			});
		});
	});
</script>