toc.html

<!-- this handles the automatic toc. use ## for subheads to auto-generate the on-page minitoc. if you use html tags, you must supply an ID for the heading element in order for it to appear in the minitoc. -->
<script>
;$(function() {
  var level = parseInt({{ include.level | default: 3 }}, 10);
  if (level === 1) {level = 'h2'}
  if (level === 2) {level = 'h2,h3'}
  if (level === 3) {level = 'h2,h3,h4'}
  if (level === 4) {level = 'h2,h3,h4,h5'}

  var toc = $('#toc')

  toc.toc({minimumHeaders: 0, listType: 'ul', showSpeed: 0, headers: level})

  /* this offset helps with the space taken up by the floating toolbar */
  toc.on('click', 'a', function() {
    var target = $(this.getAttribute('href')),
      scroll_target = target.offset().top

    $(window).scrollTop(scroll_target - 10)
    return false
  })
  .on('click', '.toc-expand-button', function() {
    toc.find('> ul').slideToggle('fast');
  })
})
</script>

<div id="toc">
  <span class="toc-title">Page Contents</span>
  <button type="button" class="btn btn-link toc-expand-button">
    <i class="fa fa-bars"></i>
  </button>
</div>