Finsweet ToC

Finsweet's ToC.

• Provides a way to automatically generate a ToC from rich text element content.
• Allows full styling control through the Webflow designer.
• Generates #fragment referenceble ID's from H2's, H3's, H4's. that can be linked to externally.
• - Does not have a built-in mechanism for adding a link for these ( like click to copy the link to heading X

Customizing

How to Style Current State in the ToC

Webflow doesn't make it easy to set the Current state on links, which makes styling FS ToC quite challenging.

Here's how I do it.

Suppress the ToC if there are no headings in the content

FS ToC doesn't run if their are no headings found in the rich text content, however this often means you'll see a ToC element of "Example H2" shown.

Here's how to suppress the ToC when there are no headings;

https://forum.finsweet.com/t/table-of-contents/2182/6

‍

Advanced Use

To detect and perform tasks after the ToC has been constructed;

‍

https://forum.finsweet.com/t/is-there-toc-setup-complete-event-callback/1664

Bugs & Limitations

Localization

FS ToC ct handle H2's that contain no English characters. It doesn't know how to create the ID for the H2 and it falls over building the ToC. I've confirmed that in the FS forum.

I found a hack, which involves inserting a random hidden English string into each H2 just so FS ToC can work. It works well as the ID's and items create... but you'd need an inline script to synchronously add an embed those hidden strings before FS ToC, runs, and then another script to remove them after FS ToC runs for Google SEO.

‍

‍