Streaming live at 10am (PST)

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

Looking for an easy way to automatically generate Table of Contents for your blog posts or other CMS items?

I recently built a system that dynamically generates ToCs based on the headings (H2, H3, etc.) of any Rich Text field. Super easy to set up, less than 10 lines of code, and no plugins.

Find the full blog post with images, gifs, and code snippets here :point_right: https://www.flowrite.com/blog/dynamic-table-of-contents-on-webflow-cms

4 Likes

@aaro This is so cool!

1 Like

Super cool, thanks a ton for this!

1 Like

it’s great work. Small question – does it have active state?

Thanks! What do you mean exactly?

something like this – http://joxi.ru/GrqjeX6tG98vOm

Hi Aaro,

did you have a chance to look at my question?

Yes! I made that work with an additional code snippet. I’ve included the instructions in the blog post – hope it helps!

activescroll

it’s incredible. You are wonderful. thanks a lot :pray::pray::pray:

1 Like

Hey there Aaro, this is awesome - and a nice replacement for http://projects.jga.me/toc/

I have a question: This is for SEO reasons, and it is the reason I’m considering leaving the TOC jquery plugin.

Is there a way that you can generate the ToCs based on headings through the page, but have the links in the TOC be " p tags vs H2s"

The TOC plugin, unless I’m mistaken, auto creates the TOC links as H2s on the page. This caused me an SEO issue because H2s are now repeated on page.

Here is an example of the current blog post I’m using jquery for.

Hi Aaro,

did you have a chance to look at my question?