I really like the new TOC widget but having it in sidebar only is not very useful if you place the sidebar on bottom of contents in mobile navigation.
I tried to place a second TOC widget inside my main content and hided them respectively in mobile or desktop breakpoints (the one in sidebar is set to be not displayed at the mobile landscape breakpoint while the other one is set to be displayed only from that breakpoint and below).
I found out that the one loaded after (in my case the one placed in sidebar) is not loaded at all so I have to use just one TOC widget and place it somewhere which can be useful either for desktop and mobile traffic.
Thank you so much for your report and I’m glad you like the new ToC element
You’re right, only 1 ToC element per page are supported right now. It would be nice to make it possible to have more than 1 so I’ve added this to our internal board.
Hi all,
The workaround I implemented was a short bit of JavaScript that moves the table of content div, or in my case the wrapper, from the sidebar and inserts it before the first h2 in the blog content when in mobile.
This way there aren’t additional elements on the DOM, some that show on desktop, some that show on mobile.
I did a bit of research and it seems most sites like to place the table of contents before the first h2 as that lets there be an opening paragraph for the user to read on mobile before they get to the heading list
Thank you so much for sharing this solution. If a page uses only one ToC for any given breakpoint, this can definitely work. But we’ll also look into making sure you can also have 2+ ToC elements on the same page at the same time.
