$(document).ready(function() {
// Docs sidebar accordion $('.docs__nav-toggle').click(function(e){ (e).preventDefault(); var nav = $('.docs__nav'); var item = $(this).parent(); var dropdown = $(item).find('.docs__nav-dropdown'); // Open dropdown of clicked item if($(item).hasClass('docs__nav-item--active')){ $(dropdown).slideToggle(function(){ $(item).toggleClass('docs__nav-item--active'); }); } else { $(dropdown).slideToggle(); $(item).toggleClass('docs__nav-item--active'); } // Close already opened elements $(nav).find('.docs__nav-item--active').not(item).each(function(){ $(this).find('.docs__nav-dropdown').slideToggle(); $(this).removeClass('docs__nav-item--active'); }); }); // Table of contents -- Fill list with links to h2 headlines $('.docs__content h2').each(function(){ // Get the h2 element attributes from DOM and create li element with link to it var id = $(this).attr('id'); var label = $(this).text(); var element = $('<li class="docs__toc-item"><a href="#'+ id +'" class="docs__toc-link">'+ label +'</a></li>' ); // Specify list in DOM var toc = $('.docs__toc-list'); // Append each created element to the list $(element).appendTo(toc); }); // Table of contents -- Smooth scroll to ID $('.docs__toc-link').click(function(e){ e.preventDefault(); var nav = $('.docs__toc-list'); var item = $(this).parent(); // target element var id = $(this).attr('href'); var $id = $(id); if ($id.length === 0) { return; } // Add active class to parent element (li) $(item).toggleClass('docs__toc-item--active'); // Remove active class from rest of the elements $(nav).find('.docs__toc-item--active').not(item).each(function(){ $(this).removeClass('docs__toc-item--active'); }); // Top position relative to the document var pos = $id.offset().top - 128; // Animated top scrolling $('body, html').animate({scrollTop: pos}); }); // Table of contents -- Scrollspy (change active class on scroll) var headlines = $('.docs__content').find('h2'); // Iterate through all headlines and set scrollspy function on them headlines.each(function(index) { // Get the position of current headline var position = $(this).position(); // Get the position of the next headline to set sectionHeight if(index !== headlines.length - 1) { var sectionHeight = headlines.eq(index + 1).position().top; } else { var sectionHeight = position.top + $(this).height() } // Add scrollspy to the current headline $(this).scrollspy({ min: position.top, max: sectionHeight, onEnter: function(element) { // Add 'active' class to element visible on viewport var item = $('a[href="#' + element.id + '"]').parent(); $(item).addClass('docs__toc-item--active'); // Remove active class from items previously labeled as active $('.docs__toc-list').find('.docs__toc-item--active').not(item).each(function(){ $(this).removeClass('docs__toc-item--active'); }); } }); });
});