Dynamically Generated ToC with Webflow CMS

Generating a Table of Contents (TOC) with Richtext Headings as Anchor Text

I have improved the Table of Contents (TOC) being generated, from the flowrite example (vide infra/ see below). The improvement modifies the script to use the heading text string as the unique ID, no longer just an index number.

This

1. Makes it clear to readers of the link where they are being pointed to
2. Could improve the search engine findability (SEO)

New Code Snippet

document.getElementById("content").querySelectorAll("h2,h3,h4").forEach(function(heading) {
  let headingText = heading.innerHTML.trim().toLowerCase();
  headingText = headingText.replace(/[^a-z0-9\s]+/gi, '').replace(/\s+/g, '-'); // Remove non-alphabetic characters and replace spaces with hyphens
  heading.setAttribute("id", headingText); // Set the unique ID as the heading text
const item = document.createElement("a");
item.innerHTML = heading.innerHTML;
item.setAttribute("class", "tocitem");
item.setAttribute("href", "#" + headingText); // Set the href attribute to the heading text as the unique ID
document.querySelector("#toc").appendChild(item);
});

Before

1. For each of the h2 and h3 elements found, it assigned a unique ID in the format "toc-N", where N is the index number of the element in the query result.
2. It then created an anchor element () for each heading, and set the innerHTML to be the same as the heading text.

Now, improved

This JavaScript code generates a table of contents (TOC) for a webpage by creating anchor links for all h2, h3, and h4 heading elements within an element with the ID "content".

1. Iterates through each of the selected heading elements using the forEach loop.

2. Trims leading and trailing whitespace from the heading text and converts it to lowercase.

   1. Removes any non-alphanumeric characters (except spaces) from the heading text using the regular expression /[^a-z0-9\s]+/gi. This ensures that the heading text contains only lowercase letters, numbers, and spaces.
   2. Replaces any sequence of one or more spaces in the heading text with a single hyphen using the regular expression /\s+/g. This step creates a unique ID that consists of words separated by hyphens.

3. Assigns the resulting heading text as the unique ID of the heading element.

4. Creates an anchor element () and sets its innerHTML to the heading text.

When this script is executed, it generates a table of contents with clickable links pointing to the respective heading elements (h2, h3, and h4) within the "content" element.

</ hr>

How-to Implement

Generating ToC’s based on h2 and h3 headings of a rich text CMS element with active states in a sticky Table of Contents, as done by flowrite.

Follow the flowriteinstructions. This post here is just archival for my implementations of it. Besides specifics, they also talk about variants like how to create ToC inside a rich text element.

‍

‍

Create a Div with id "toc" for the ToC with a text-link element inside.

Style the TOC classes.

Style the "active" class.

Name the Rich Text content element id "content".

Create custom field in CMS Collection:

TOC generated from

(Plain text)

Comma separated, no spaces! Define the Heading tags you want to be generated in the ToC from the Rich Text

Insert code at the end of <\body> tag on collection page template setting.

Use the dynamic “Add Field” to replace [HEADINGS] in above code with the value of your "TOC generated from" CMS field.

‍