Hey everyone, so I’m creating this blog for the company I’m working at even though I’m pretty new to web design in general and Webflow. That’s why I’m currently having an issue with the table of contents. I am trying my best to explain the problem, hopefully you can help me solve this.
I planned about 10 blog posts and I need all of them to have a static table of contents, which contains all the H2 and H3 elements in the post. The Headings are dynamic links and the ToC gets its content from the CMS Collections I previously created. I want the ToC to be clickable - it should directly lead the reader to the particular page section. The page itself consists of rich text elements - each RTE is meant to be one chapter.
I somehow managed to make this work for the desktop version of the blog posts by adding ID’s for in-page linking, but I’m struggling with the tablet version and below:
Almost all the headings are working, except for the first two headings in each blog post. I don’t even know how I managed to make the rest work, taking into consideration that some of the rich text elements don’t even have an ID. I think I could solve this, if the IDs were not unique, but unfortunately you can only use one ID for one blog post section.
Hope that was clear enough to point out, what I’m trying to build. Looking forward to your solutions Thanks in advance!
It sounds like you’ve made great progress with the desktop version, and I totally get that handling responsive designs can be a bit tricky. Here are a few suggestions to help you with the tablet and below versions:
Unique IDs: Ensure that each heading has a unique ID. If you’re encountering issues with the first two headings, double-check that their IDs are unique across all posts.
ID Assignment: If you haven’t already, try assigning IDs directly to the H2 and H3 elements within your rich text elements. This might help with the consistency across different devices.
CMS Collection Fields: Consider using CMS collection fields to store IDs. You can create a unique identifier for each heading within your CMS and dynamically link them to your ToC.
Conditional Visibility: If specific elements are causing trouble, explore conditional visibility settings for those elements. Sometimes, certain settings may affect how elements appear on different devices.
Keep up the great work, and looking forward to seeing your blog in action!
Thank you so much for your kind words and the suggestions, I really appreciate that!
Your second and third solution sound pretty interesting and could really solve this problem. I already created CMS collection fields for each heading, but I don’t know how to link them to the ToC while also leading the reader to the page section.
Would you mind explaining, how I can manage to do that? I didn’t even know that I could add IDs to my H2 and H3 elements within the rich text, as RTE are already very difficult for me to handle.
You’re very welcome! I’m glad you found the suggestions intriguing. Let’s dive into how you can link CMS collection fields to your Table of Contents (ToC) and set up IDs for your rich text elements:
Linking CMS Collection Fields to ToC:
CMS Collection Setup:
In your CMS collection, ensure you have a field specifically for the heading ID. Let’s call it something like “Heading ID” for clarity.
CMS Content Entry:
As you create or edit each CMS entry, populate the “Heading ID” field with a unique identifier for that heading. This can be a simplified version of the heading text.
Dynamic Linking in ToC:
In your ToC, where you list the H2 and H3 elements, set up dynamic linking.
For the H2 link, use the dynamic data option to pull from the “Heading ID” field.
This way, each link in the ToC dynamically corresponds to the specific heading ID in your CMS.
Setting Up IDs for Rich Text Elements:
In Rich Text Element:
Open the rich text element for the specific chapter in your blog post.
Select the H2 or H3 element you want to link to.
In the right sidebar, under the settings tab, you’ll find an “ID” field. Enter the corresponding CMS “Heading ID” here.
Linking in ToC:
Now that your H2 and H3 elements have IDs, the ToC links can point directly to these IDs.
In the ToC links, set up interactions to scroll to the section with the corresponding ID.
Note:
Make sure IDs are unique for each rich text element on the page.
I hope this helps! Feel free to share your availability, and we can schedule a call at a time that works best for you. Looking forward to diving deeper into your project and resolving any questions you may have!
Is there a reason you’ve separated your blog content into multiple rich text elements?
Typically the easiest way to approach this is to have one large RT for all of your blog content and then to generate the ToC programmatically.
I typically use Finsweet’s ToC solution for this-
There is a small learning curve, but it handles everything you need-
Auto generation of a hierarchical ToC from H2s H3s H4s etc.
Click to scroll
Automatic ID generation for your headings, which can also be bookmarked and referenced externally
Current styling, as you scroll, you can see where you are in the ToC
Thank you so much for the solutions, after testing a few of them - this one worked perfectly for me!!
The reason why I initially had multiple rich text elements for each chapter was because I did not know how to make the “click to scroll” work inside one big RTE. So I tried to link each heading in the ToC to one RTE, which was quite difficult to manage for more than one blog post.
Finsweet never disappoints, even though there was a small learning curve, as you said. Thanks again, this really worked like magic.
I have one more question about this. I generated the table of contents for each blog post and they work perfectly fine, but somehow in the tablet breakpoint and below I cannot see some of the headings in the ToC. For example the second H2 and several H3 are missing, while the last heading is showing again. Do you guys have any idea why this problem appears? I attached a screenshot from my mobile phone.
On that page, I’m not seeing any missing items at the breakpoint changes;
Desktop-
Tablet-
Mobile landscape & portrait are the same-
Those 3 screenshots are all from Chrome windows desktop.
But I’ve also checked on an Android / Chrome and seeing no issues.
Try clearing your cache maybe?
The best I can suggest is browse around your site, see if you can reproduce the problem consistently. The FS ToC builds on page load, so if your mobile view were different ( esp scripted content changes ), the ToC would try to build for that content.
I help clients debug these types of issues sometimes, but tbh it’s quite time-consuming especially for things that are intermittent and difficult to reproduce.
If you can find a place that is consistently behaving differently though, Finsweet has a solid [paid] support forum.
Thanks for checking, I didn’t even notice this issue at first because it seemed to be fine on the windows desktop as you experienced too.
We’ve also checked this afterward on a few mobile phones in the office and noticed that the problem only occurs on iPhones - that’s why I thought the source of problem is the safari browser, but unfortunately it’s still a problem on Apple devices even with the chrome browser.
I found a few similar topics in the finsweet support forum, I guess it’s a bug that will hopefully be solved soon. Anyway, please let me know if you have any other ideas to resolve this. Thank you for your effort
I think I could solve this, if the IDs were not unique, but unfortunately you can only use one ID for one blog post section.
Thanks in advance!
Thanks again, this really worked like magic. 
