Community forum for knowledge and support

Updated 6 months ago

Syncing table of content with h2 titles

At a glance

The community member is trying to get the Content 27 feature to work on their client's blog, but the table of contents is not syncing with the H2 title names, only showing "Heading 2". The community members share a preview link and discuss troubleshooting steps, such as following the FinSweet Attributes table of contents guide, selecting the link templates, and setting the URL to the current page to get the "current" green tag. However, they are still having trouble getting the desired styling and functionality to work as expected.

Useful resources

Hey All!

Im trying to get Content 27 Work on my client Blog, i actually configured the FinSweet Script + Atrributes, but the table of content is not syncing with H2 Title names, it’s only showing “Heading 2”

M
M
39 comments

would you mind sending a read-only link and a published URL?

You will encounter with 2 rich text, the Conten 27 first, then the oldone

Omg ive just noticed that i had to publish! Sorry for bother!

ah okay, so all good?

I’m trying to figure it out the animations

Becuase now im clicking and i goes to the H2 instantly

Also I’m trying to change de font & background color of the selected H2/current but it’s changing every Heading

yeah you'll need to follow these steps for an active/current state
https://finsweet.com/attributes/table-of-contents

that’s what im following

k, so do you see the green "current" tag or?

i actually removed the current class that it came from Relume

Should I import another Content 27 and start over?

yeah for some reason the steps are in reverse of what you need to do, I have no idea why

To edit the Current state class inside Webflow Designer:

  1. Select one of the link templates ( fs-toc-element = "link" )
  2. Set the url of the link to the page you are on
  3. See the green "Current" class appear in the Styles panel
  4. Apply the current/active styles for the link. These styles will be used when a link is active while scrolling through the table of contents.

shouldn't have to restart no

the step 1 is the one im lost

okay it should be like that

step one is to select one of the links and change the page to the current page you are on

this will give you the green "current" and then you can style

“2.Set the url of the link to the page you are on” Im trying to make it work for a H2 link, not another page

its a temporary thing

if you set the link to the current page, thats how you get the "current" green tag

the JS will replace all of this, with a completely different set of HTML

you aren't selecting the link tag either, thats the text block

Yeah, the attribute is on the Text Block

yeah, thats not the concern right now

Add a reply
Sign up and join the conversation on Slack