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

### Example 1

![](/files/-LypDrea7Zjvrt2XRj8p)

{% file src="/files/-LypDz5Rh65av7oPhBAH" %}

### Example 2

<figure><img src="/files/QgYpiu4Pz8ha3BS8EnCZ" alt=""><figcaption></figcaption></figure>

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

```javascript
<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>
    
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/advanced/javascript/auto-expanding-table-of-contents-plugin-dynamic-content-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.