■目次スクリプト

var details = document.querySelectorAll('#toc');
details.forEach(function (element) {
  var summary = element.querySelector('.toc-btn');
  var content = element.querySelector('.toc-menu');
  summary.addEventListener('click', function (e) {
    e.preventDefault();
    if (element.open) {
      var openDetails = content.animate({
        opacity: [1, 0],
        height: [content.offsetHeight + 'px', 0]
      }, {
        duration: 360,
        easing: 'ease-out'
      });
      openDetails.onfinish = function () {
        element.removeAttribute('open');
      };
    } else {
      element.setAttribute('open', 'true');
      var _openDetails = content.animate({
        opacity: [0, 1],
        height: [0, content.offsetHeight + 'px']
      }, {
        duration: 360,
        easing: 'ease-out'
      });
    }
  });
});

Menu