[TUTORIAL] Dynamic Table of Contents on Webflow CMS (no plugins, automatic)

Hi @aaro are you able to paste all the code in structure? I can’t seem to make the active toc work.
because the tutorial is adding the code 1 by 1 without showing all the code in final.

I found an error when adding this part

observer.observe(heading);

my current code looks like this


if("{{wf {"path":"table-of-content-based-on","type":"PlainText"\} }}"!=""){

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const id = entry.target.getAttribute("id");
    if (entry.isIntersecting) {
      document.querySelectorAll(".active-link").forEach((z) => {
        z.classList.remove("active-link")
      });
      document.querySelector(`a[href="#${id}"]`).classList.add("active-link");
    }
  });
}, { rootMargin: '0px 0px -75% 0px' });

}

document.getElementById("content").querySelectorAll("{{wf {"path":"table-of-content-based-on","type":"PlainText"\} }}").forEach(function(heading, i) { // runs a function for all headings inside your rich text element
observer.observe(heading);
	heading.setAttribute("id", "toc-" + i); // gives each heading a unique id
  const item = document.createElement("a"); // creates an anchor element called "item" for each heading
  item.innerHTML = heading.innerHTML; // gives each item the text of the corresponding heading
  ("{{wf {"path":"table-of-content-based-on","type":"PlainText"\} }}").split(",").forEach(function(x) { // runs a function for each item in your headings list
    if (heading.tagName.toLowerCase()==x) {
      item.classList.add("tocitem", "toc-" + x); // gives each item the correct class
    }
  });
  item.setAttribute("href", "#toc-" + i); // gives each item the correct anchor link
  document.querySelector("#toc").appendChild(item); // places each item inside the Table of Contents div
});


Also curious if there’s any update on this, I’m erroring out on the same spot:

observer.observe(heading);

The addition seems to just shut down the TOC JS entirely.

Hi Jon. Everything seems to be working correctly on my end with the same code, but let me see if I can help here. Can you send me a link to your site?

1 Like

Thanks @aaro, I’m testing out on this example blog post, and here’s the read-only link.

It looks like you’re trying to call the observer function with observer.observe(heading) but you haven’t defined it in the first place. Please make sure to add the code starting with const observer = new IntersectionObserver(entries... from the blog above your current code.

You can also benchmark our blog where I’ve implemented this successfully: How to write a reminder email — 5 examples and templates

Hope this helps :blush:

I am new to Webflow and having a dynamic ToC would be great, but I am missing something from this resource - I just cannot understand what are the steps to make it work.

Adding the script is the easy part, but I don’t know what Elements I need to add and where the CSS classes go to generate the ToC for the articles.

What am I missing from the article How to Create Dynamic Table of Contents on Webflow CMS

1 Like

Hey everyone!

If you need to dynamically generate a table of contents but don’t want to bother with the step-by-step tutorials this cloneable project is for you! :grin:

I followed Aaro’s tutorial for ToC pulling just one header type. Nice and simple!

Kapture 2022-03-18 at 09.08.24

1 Like

Hello.

I was trying to set up the ToC as showed in the guide, and I really thought I’ve followed it on the spot, but it doesn’t seems to work for me.

I created the links, giving them classes of: tocitem and toc-h2 toc-h3 etc etc
Created the div with the ID “toc”
Also gave the rich text the ID “content”
I’ve added the new field on the collection called “TOC based on…” and added the h2,h3,h4 etc etc without spaces or anything
And ultimately, placed the custom code, changing the “HEADINGS” text with the “TOC based on…” everywhere (placed it at the end of the page as an embed, and also tried on the page menu before the body tag"

I really don’t now what I’m getting wrong, can someone be so kind to give me a direction?
This is the read only link:
https://preview.webflow.com/preview/samueles-project-42869b?utm_medium=preview_link&utm_source=designer&utm_content=samueles-project-42869b&preview=9f914086602b61f18774b1f90db28df1&pageId=625152e2362e3536ef4a94a3&itemId=625152e6544f7623224cb10c&workflow=preview

Thank you so much, Sam

1 Like

Search for “How to Create a Table of Contents (TOC) in Webflow in Under 20 Minutes” in YouTube

1 Like

Hey, is it possible to make the ToC in an ordered list?

1 Like

@aaro This is great thanks for putting this together., one question how can I go in to offset the Y-axis scroll?

Right now when I click on the ToC Items the site scrolls past the H2 for me.

Here’s a link to the inprogress blog post

1 Like

Hey Sam :wave: Debugging stuff like this can get complicated… if it’s not too late, I recommend cloning the project above and copying the required components into your site. If you test it each time you make a change, I guarantee you’ll get to the finish line. Good luck!

I’ve had this same issue. Checkout these posts for solutions…

@aaro Hey Aaro, love this tutorial! , but having a really weird issue with h2, h3, &h4 classes on a duplicate CMS template - an exact duplicate…

The first CMS collection works as expected…

But the second CMS collection does this…

It look like the observer is not adding/replacing the class?? Any suggestions or ideas?

Read only link

Good CMS collection link

Problem CMS collection link

I’m stumped, someone help please :pray:

@DuncanHamra Your solution is great! The only issue I have is that it doesn’t have the logic or classes to indent the ToC items based on Heading size like the Flowrite example. Is there a good reason you didn’t implement this? I ask because I’m having issues with the original implementation, but only on 1 page… I posted my issue :point_up_2: :thinking:

1 Like

I went with the more simple implementation for the sake of speed/ease of use. For that reason, I think I left out some code that was required for the more complex setup… although I’m sorry to say I don’t remember which code :disappointed: This week is pretty crazy, so I don’t be able to dedicate much time here

image

1 Like

Hi and thanks for making it clonable

sorry for that question but how did you paste your code in webflow?

1 Like

Is their a way to generate the same table twice on the sampage?

1 Like

Is their a way to generate same table twice?

1 Like

I have a question, first things first. Great implementation, this feature was a great added value to our website, thank you!

My question now, how can I increase the offset in the anchor when I click in a heading from the table of contents and the page is scrolled to that element? I ask that because I have a sticky header, and when I click in a heading from the blog, it is not showing because it is under the sticky header.

Cheers.

1 Like