Table of Contents Widget – Current Position and Headline

Hey atx_m,

Thank you for the inquiry.

The TOC widget doesn’t have an active state by default, but you can use this script in the functions.php file to add an active class on click and while scrolling.

add_action('wp_footer', function () {
    ?>
    <script>
    document.addEventListener("DOMContentLoaded", function () {
      const tocLinks = document.querySelectorAll('.avia-toc-link');
      const headingSelectors = document.querySelector('.avia-toc-container').dataset.level.split(',');
      const headings = Array.from(document.querySelectorAll(headingSelectors.join(',')));

      tocLinks.forEach(link => {
        link.addEventListener('click', function () {
          tocLinks.forEach(l => l.classList.remove('active'));
          this.classList.add('active');
        });
      });

      function onScroll() {
        let scrollPosition = window.scrollY + 100;
        let currentId = null;

        for (let i = headings.length - 1; i >= 0; i--) {
          const heading = headings[i];
          if (heading.offsetTop <= scrollPosition) {
            currentId = heading.id;
            break;
          }
        }

        if (currentId) {
          tocLinks.forEach(link => {
            link.classList.toggle('active', link.getAttribute('href') === #${currentId});
          });
        }
      }

      window.addEventListener('scroll', onScroll);
      onScroll();
    });
    </script>
    <?php
}, 9999);

You can then include this css to adjust the color of the active TOC links:

.avia-toc-link.active {
  color: #fe9000;
  font-weight: bold;
}

To change the heading tags, edit the widget and look for the “Select headlines to include” option.

Let us know the result.

Best regards,
Ismael

Hi,

Thank you for the update.

We found a minor issue in the code. Please look for this line:

link.classList.toggle('active', link.getAttribute('href') === #${currentId});

Replace it with:

link.classList.toggle('active', link.getAttribute('href') === '#' + currentId);

Hope this helps.

Best regards,
Ismael

Hi,

What happens when you temporarily disable WP Rocket? We are no longer seeing any issues and WP Rocket adds an attribute to the script marking it as executed, but the script doesn’t seem to be taking effect.

Please provide the login details in the private field so we can test this further. Make sure that Appearance > Theme File Editor is active and accessible.

Best regards,
Ismael