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