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
});
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.
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.
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"
Hey Sam 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!
@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
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 This week is pretty crazy, so I don’t be able to dedicate much time here
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.