spec/head.html

  <link rel="stylesheet" type="text/css" href="normalize.css">
  <link rel="stylesheet" type="text/css" href="tocbot.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="tocbot.min.js"></script>
  <script>
    function ready(fn) {
      if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
        fn();
      } else {
        document.addEventListener('DOMContentLoaded', fn);
      }
    }

    function toggleClass(el, className) {
      if (el.classList) {
        el.classList.toggle(className);
      } else {
        var classes = el.className.split(' ');
        var existingIndex = classes.indexOf(className);

        if (existingIndex >= 0)
          classes.splice(existingIndex, 1);
        else
          classes.push(className);

        el.className = classes.join(' ');
      }
    }

    ready(function() {
      var options = {
        tocSelector: '.toc',
        contentSelector: '#content',
        headingSelector: 'h2, h3, h4, h5, h6',
        collapseDepth: 3,
        positionFixedSelector: ".toc",
      };

      tocbot.init(options);

      document.querySelector('.toc-menu').addEventListener("click", function() {
        toggleClass(document.querySelector('.toc'), "open");
      });
      
      
      // need this part to fix toc offset height if content above toc changes height
      var resizeTimer;
      window.addEventListener('resize', function(e) {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
          o = options;
          o.fixedSidebarOffset = "auto"; 
          tocbot.refresh(o);
        }, 250);
      });


    })
  </script>