😃Auto Expanding Table Of Contents Plugin - Dynamic Content menu (ok)

Example 1

15KB

expanding-table-contents.zip

archive

Example 2

<div class="toc-wrap">
     <div class="toc-title">MỤC LỤC</div>
     <div id="toc"></div>
</div>

<script type="text/javascript">
      const headings = document.querySelectorAll('#contents h1, #contents h2, #contents h3, #contents h4, #contents h5, #contents h6');
      if (headings.length != 0) {
        const tocContainer = document.querySelector('#toc');
        const startingLevel = headings[0].tagName[1];
        const toc = document.createElement('ul');
        const prevLevels = [0, 0, 0, 0, 0, 0];
        for (let i = 0; i < headings.length; i++) {
          const heading = headings[i];
          const level = parseInt(heading.tagName[1]);
          prevLevels[level - 1]++;
          for (let j = level; j < prevLevels.length; j++) {
            prevLevels[j] = 0;
          }
          const sectionNumber = prevLevels.slice(startingLevel - 1, level).join('.').replace(/\.0/g, "");
          const newHeadingId = `${heading.textContent.toLowerCase().trim().replace(/ /g, '-')}`;
          heading.id = newHeadingId;
          const anchor = document.createElement('a');
          anchor.setAttribute('href', `#${newHeadingId}`);
          anchor.textContent = heading.textContent;
          anchor.addEventListener('click', (event) => {
            event.preventDefault();
            const targetId = event.target.getAttribute('href').slice(1);
            const targetElement = document.getElementById(targetId);
            targetElement.scrollIntoView({
              behavior: 'smooth'
            })
            var uri = window.location.toString();
            if (uri.indexOf("#") > 0) {
              var clean_uri = uri.substring(0,
                uri.indexOf("#"));
              window.history.replaceState({},
                document.title, clean_uri);
            }
          });
          const listItem = document.createElement('li');
          listItem.textContent = sectionNumber;
          listItem.appendChild(anchor);
          const className = `toc-${heading.tagName.toLowerCase()}`
          listItem.classList.add('toc-item');
          listItem.classList.add(className);
          toc.appendChild(listItem);
        }
        tocContainer.innerHTML = '';
        tocContainer.appendChild(toc);
      }
</script>
<style type="text/css">.toc-wrap{border-radius:.375rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);background-color:#f9fafb;border-width:1px;border-color:#d2d6dc;padding-bottom:30px;margin-bottom:30px}.toc-wrap ::-webkit-scrollbar{-webkit-appearance:none;width:7px}.toc-wrap ::-webkit-scrollbar-thumb{border-radius:5px;background-color:#ccc;-webkit-box-shadow:0 0 1px rgba(255,255,255,.5)}.toc-wrap .toc-title{text-align:center;font-size:2rem;margin-top:1rem;padding-top:25px}.toc-wrap #toc{max-height:calc(100vh - 150px);padding:1rem;overflow-y:scroll}.toc-wrap #toc a:hover{text-decoration:underline}.toc-wrap #toc .toc-active{font-weight:bold;color:#2563eb}.toc-wrap #toc .toc-item{padding:.1em 0}.toc-wrap #toc a{padding:.25em .5em}.toc-wrap #toc .toc-h2{margin-left:.5em}.toc-wrap #toc .toc-h3{margin-left:1.75em}.toc-wrap #toc .toc-h4{margin-left:3em}.toc-wrap #toc .toc-h5{margin-left:4.25em}.toc-wrap #toc .toc-h6{margin-left:5.5em}</style>