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;

<script>
    function hideTocTableIfNoHeadings() {
        const richText = document.querySelector('[fs-toc-element="contents']'');
        const headings = richText.querySelectorAll('h1, h2, h3, h4, h5, h6');
        const tocTable = document.querySelector('[fs-toc-element="table"]');
        if (headings.length === 0) {
            tocTable.style.display = 'none';
        }
    }
    hideTocTableIfNoHeadings();
</script>

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

‍