Table of Contents (ToC) Generator for Webflow CMS

Updated 2023 Version

I have done versions of this script in the past. This one is the most extensive with 4 different functionalities:

1. Dynamic Table of Contents:
   The script automatically generates a table of contents based on the headers within your content. This helps users understand the structure of your content at a glance and navigate directly to the section they're interested in.
2. Stylable Based on Heading Level:
   Each table of contents item is automatically given a CSS class that corresponds to its heading level (e.g., toc_h2, toc_h3), allowing for customization of style for each heading level.
3. Active Section Highlighting:
   As the user scrolls through the page, the script identifies the current section being viewed and highlights it in the table of contents. This provides a visual cue to help users keep track of their position in the document.
4. Interoperability with CMS:
   This script is designed to work with a content management system (CMS), allowing you to specify which heading levels to include in the table of contents.

The value provided by this script lies in function 4 because it improves the usability for long-form content:

• In the past all h tags were considered by the script to generate the ToC.
• Now, You can choose to what depth you want your ToC to be generated from right in your Webflow CMS (or any other headless CMS).

In general, a ToC improves usability for any content designed for reading:

1. Enhanced Reader Experience: By offering a table of contents and active section highlighting, readers can quickly navigate to the sections that interest them and maintain their location in long articles or posts. This can significantly improve the reader's experience, especially on long and complex pages.
2. SEO Benefits: By structuring your content with headings and providing anchor links to specific sections, you can potentially improve your content's search engine optimization (SEO). Search engines like Google use headings to understand the content's structure and topics, and anchor links make your page more navigable for users coming from search results.
3. Accessibility: This approach is also beneficial from an accessibility perspective. It assists screen readers and other assistive technologies in understanding the organization of the page content, thus improving the accessibility of your webpage.

This script now provides a relatively simple and effective way to enhance the navigability of your webpage, improve reader experience, and potentially boost SEO, all of which are critical for a great blog or any other content-rich website.

Documentation for the Table of Contents (ToC) Generator

This script automatically generates a dynamic and stylable table of contents (ToC) from selected heading levels in a webpage. It creates unique anchor links for each heading and monitors the user's scroll position to highlight the active section in the ToC. The generator can be easily customized by specifying which heading levels (e.g., h2, h3, etc.) should be included in the ToC.

How It Works

The script follows these steps:

1. It retrieves the ToC container and the heading selectors from the webpage.
2. It assigns a unique ID to each heading based on its content, and creates a corresponding anchor link in the ToC.
3. It uses the Intersection Observer API to monitor which heading is currently in the viewport as the user scrolls through the page.
4. When a heading enters the viewport, the script highlights its corresponding link in the ToC by adding an 'active' class to it.

Usage

1. Copy and paste the script into your webpage. The script should be placed within <script> tags, preferably just before the closing </body> tag for better performance.
2. Ensure that your page has a container for the ToC with the ID toc and a content container with the ID content.
3. By default, the script includes headings level h2 through h6 in the ToC. If you want to specify different heading levels, you can either

• hard code it: replace the string in the headingsSelector variable with the levels you want to include, separated by commas (e.g., "h2,h3") and no spaces!
• Or: Create a text field in your Webflow CMS where you can choose the levels you want to include, separated by commas (e.g., "h2,h3" - and no spaces!) directly in your CMS when you write a blogpost. Then, you have to replace the string in the headingsSelector variable with a field in Webflow.

4. Now, the script automatically assigns each heading in the ToC a class of tocitem and toc_hX, where X is the level of the heading (e.g., h2). You can use these classes to style the ToC items in your CSS.
5. The script also assigns an 'active' class to the ToC item corresponding to the heading that is currently in the viewport. You can use this class to highlight the active item in your CSS.

ToC Script

<!-- generate a TOC styleabel by headings level -->
<script>
let toc = document.querySelector("#toc");
let headingsSelector = "[wire up your Webflow dynamic field here]";  // Selector for Headings selected in CMS
// If no value provided, default to all headings-except h1
if (!headingsSelector || headingsSelector.trim() === "") {
headingsSelector = "h2,h3,h4,h5,h6";
}
let headings = Array.from(document.querySelector("#content").querySelectorAll(headingsSelector));
let tocItems = headings.map((heading, index) => {
let headingText = heading.textContent.trim().toLowerCase();
headingText = headingText.replace(/[^a-z0-9\s]+/gi, '').replace(/\s+/g, '-');
let id = ${headingText}-${index};  // ensure uniqueness
heading.setAttribute("id", id);
heading.classList.add("anchor");
const item = document.createElement("a");
item.textContent = heading.textContent;
item.href = #${id};
item.classList.add("tocitem", toc_${heading.tagName.toLowerCase()});
toc.appendChild(item);
return item;  // return the created tocItem
});
// Use Intersection Observer API to determine when a section becomes visible
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const id = entry.target.getAttribute("id");
if (entry.isIntersecting) {
document.querySelectorAll(".active").forEach((z) => {
z.classList.remove("active")
});
document.querySelector(a[href=&quot;#${id}&quot;]).classList.add("active");
}
});
}, { rootMargin: '0px 0px -75% 0px' });
// Observe each heading
headings.forEach(heading => {
observer.observe(heading);
});
</script>

Customization

You can easily customize this script according to your needs. For example:

• If you want to include all heading levels in the ToC, you can set headingsSelector to "h1,h2,h3,h4,h5,h6".
• If you want to change the container of the ToC or the content, simply replace "#toc" or "#content" in the script with the selector of your desired container.
• You can modify the Intersection Observer's root margin in order to change when a heading is considered to be in the viewport.

Compatibility

This script uses modern JavaScript features and should work in all modern browsers. It does not rely on any libraries or frameworks, so it can be used in any JavaScript environment. Might not work in Internet Explorer, as the Intersection Observer API is not supported there.