I have implemented the tocbot script on an instance of the docuhub theme https://docuhub.t2themes.com.
This solution provides a fine-grained left panel navigation wherein all tags/topics on the site are listed, with all of the posts under each tag/topic.
Then, on every post, a clickable table of contents also appears at the bottom of the navigation, for easy access to the content within the post.
I have included screenshots below, but to see it on a live demo site you can go here: https://docuhub.ghost-o-matic.com/the-editor/#working-with-images-in-posts
3 Likes
Thanks for showing me this library @denvergeeks. We ended up using this very tool in our tutorial:
Hopefully this will help anyone who stumbles upon this thread 
2 Likes
@DavidDarnes thank you for that excellent tutorial! I’m sure it will be useful to many Ghosties.
1 Like
@DavidDarnes
Hi,
followed the guide but I am having some problems.
When I have two or more h2 tags one after the other and subsequently an h3 tag, the latter is not displayed.
Also an empty h3 is generated as you can see from the blue arrow.
What could be the problem?
I see what’s happening, the h3 heading is collapsed. You can see the class name “collapsed” in the HTML. This happens when there’s a h3 under a h2. This gif shows how it collapses and opens:
The empty h3 must be from your content, you must have made a new line for a heading but didn’t type anything
1 Like
Well I understand the problem, when the content of the article is too short, it simply cannot work. The script does not behave as expected. Also because it is positioned at the top, so the position remains visibly always on the first h2.
By increasing the content of the article and moving the TOC with a fixed position, everything works correctly
About the empty h3 you were right, it’s a new line without content
1 Like
