hasInnerContainers: false is not working for relative and abosulte container

[kevalrathod]

I want to exclude the header(h2) inside the relative div container like below code.

<div class="relative isolate overflow-hidden rounded-2xl bg-gray-900 p-8 text-center shadow-xl">
  <h2 class="mx-auto max-w-2xl text-3xl font-bold tracking-tight text-white sm:text-2xl" style="
    margin-top: 3px;
    margin-bottom: 12px;
">Schedule a Demo with Our Video Expert!</h2>
  ...
</div> 

Problem is that h2 header is still render in the table of content. This is my config.

    tocbot.init({
      tocSelector: '.table-of-contents',
      contentSelector: '.blog-content',
      headingSelector: 'h2', // Adjust this based on your heading structure
      hasInnerContainers: false,
      ignoreSelector:'.relative .isolate .overflow-hidden .rounded-2xl .bg-gray-900 .p-8 .text-center shadow-xl',
      linkClass: 'toc-link',
      // the link corresponding to the top most heading on the page.
      activeLinkClass: 'is-active-link',
      headingsOffset: 40,
      scrollSmoothOffset: -40
    })

You can check this issue live text inside h2 in CTA is rendered in table of contet.

[tscanlin]

Hey, you should be able to add this class to that heading to skip it. ‘js-toc-ignore’ Let me know if that doesn’t work for you. https://github.com/tscanlin/tocbot/blob/b2e30cfb5eace87c6eb6e99845c4f3df40e471e6/README.md?plain=1#L140

[kevalrathod]

Hey I have added this. Thanks for the response.

ignoreSelector:'.relative h2 and this is working.

[tscanlin]

Just note that will skip all h2's so that may or may not be what you want. You could change to this to just do the first: ignoreSelector:'.relative h2:first-child' or add the default class to the HTML element <h2 id="..." class="js-toc-ignore">The Heading</h2> Anyway, glad you figured it out!