Published
July 19, 2023
Updated
July 20, 2023
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