Styling Our Auto-Generated ToC in Webflow

1. Styling Our Generated ToC According to the Headings Levels
2. Styling Our Generated ToC with an ACTIVE Class

1. Styling Our Generated ToC According to the Headings Levels

Previously we added an automatically generated Table of Contents (ToC).

We now want to style each of these tocitem differently based on the heading (h2, h3, h4) they belong to.

To make each tocitem identifiable by the heading tag (h2, h3, h4) they belong to, we now need to modify the previous script to add an additional class corresponding to the type of heading.

I want to use a naming convention like toc_h2, toc_h3, toc_h4 for the new classes.

Adding the JavaScript

<script>
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, '-');
  heading.setAttribute("id", headingText);
// Add the anchor class to the heading
heading.classList.add("anchor");
const item = document.createElement("a");
item.innerHTML = heading.innerHTML;
item.setAttribute("class", "tocitem toc_" + heading.tagName.toLowerCase());
item.setAttribute("href", "#" + headingText);
document.querySelector("#toc").appendChild(item);
});
</script>

We've added + heading.tagName.toLowerCase() to the class attribute of each a element. heading.tagName will return the tag name of the heading (in uppercase), so we convert it to lowercase to match typical class naming conventions.

This gives us the flexibility to style each tocitem differently according to the heading they are linked to.

Add this JavaScript snippet to the before </body> tag

Style the heading CSS

Now, in Webflow we can style our CSS by targeting .tocitem.toc_h2, .tocitem.toc_h3, and .tocitem.toc_h4

Each table of contents items can be styled differently based on which heading they belong to.

For example: in your CSS, we can apply specific styles:

.toc_h2 {
  /* styles for h2 toc items */
}
.toc_h3 {
/* styles for h3 toc items */
}
.toc_h4 {
/* styles for h4 toc items */
}

In Webflow it looks like this:

Then, set the Div Block you styled to "hidden" (for details see previous ToC docs).

---

2. Styling Our Generated ToC with an "active" Class

Next, we now want to add an "active" class that boldens the item in the table of contents when the corresponding heading is in the viewport (i.e., currently visible on the screen).

This is a bit more complex, and will involve listening for the scroll event and checking the position of each heading relative to the top of the viewport.

The CSS Styling of an “Active” Class

Thanks to the "cascading" nature of CSS (Cascading Style Sheets) the active class will not interfere with the toc_h2, toc_h3, or toc_h4 classes. In CSS, multiple classes can be applied to a single HTML element and each class will contribute its own styles to the element. The final style applied to an element is a combination of the styles of all its classes, with later styles overriding earlier ones. So even if there's a conflict (for example, if both toc_h2 and active classes try to set the font weight), the style from the class that is defined later in the stylesheet will be applied.

Defining these classes in a CSS looks like this:

.toc_h2 {
  /* styles for h2 toc items */
}
.toc_h3 {
/* styles for h3 toc items */
}
.toc_h4 {
/* styles for h4 toc items */
}
.tocitem.active {
font-weight: bold;  /* this will be applied in addition to the styles from toc_h2, toc_h3, or toc_h4 */
}

So, when the active class is added to a table of contents item, the item will have the combined styles of both the active class and the toc_h2, toc_h3, or toc_h4 class. When the active class is removed, the item will revert back to just the styles from the toc_h2, toc_h3, or toc_h4 class.

But, like before, we will use Webflow to design our style classes. This time we just add an active class. And make set text to `500—medium` (my standard style is `400—normal`).

Modify the JavaScript for Listening to Viewport

And of course we have to modify our JavaScript in the as well so that the corresponding tocitem for the heading that is currently visible will be manipulated to have bold text style.

<script> 
// My apologies, but the script isn't working as expected. I have to come back with another solution and maybe a little robuster version of the original script
  </script>