Create a Table of Contents automatically

已于 2016年8月18日发布

Much like the author of this article, our company needs a way to automatically generate a table of contents for large articles. After finding out we can use jQuery, I put together a script that will automagically create a tiered table of contents based on the Header tags used in the article.

All you need to do is paste the Javascript in this page into the Javascript section of your Articles:

Click on the JS tab, then paste in the code at the end:

That should do it.. as long as you've used proper heading tags (H1, H2, etc), a Table of Contents will be created any time you load the article.

You can see a live example here: http://codepen.io/ngalluzzo/pen/kXqyVQ?editors=1010

55 条评论

日期

最新

Vlad

2020年9月18日

Hey Ami, I didn't notice, to be honest. Do you have it on live and can share the URL with us so I can check?

Ami Dewar

2020年9月17日

Vladan - This works great in Chrome and Safari, but in Firefox the li elements are not created - have you noticed this?

Permanently deleted user

2020年4月24日

I added Lily Svetnik code and it worked but is there any way I can make this into side navigation and not the first thing on the article - does that make sense?

Here is a link to an article: https://helpcenter.enalyzer.com/hc/en-us/articles/360012608599#HowdoIcreateateam?

Brett Bowser

2020年3月09日

Hey Tyler,

This would require some custom code in your Guide theme which is not something we can help with from our end. I would recommend taking a look at the following documentation we have available:

If you don't have the necessary resources available to assist with customizing your Help Center, we do have a Professional Services team that can assist at an additional cost. This is something you'll want to discuss with your account manager so if you're interested, I'm happy to get you in touch if needed.

Cheers!

Tyler Abate

2020年3月06日

Can a community team member assist me with adding a table of contents to my knowledge base? The above does not seem to work in 2020. Also, I am using H2 for my main headers.

Brett Bowser

2019年8月26日

Thanks for taking the time to share this with everyone Matthew!

Matthew M.

2019年8月23日

Hey everyone, check out this article which has a modified Javascript code that uses "H2" size for TOC headings. The original source code can be found in Github here which uses the WYSIWYG editor "Huge" size for the TOC. Both worked for my Help Center in wonderful fashion. I prefer the original source code since it allowed the ability to give the TOC a custom placeholder name and hyperlinks the "Huge" headings. Highly recommend for anyone looking to add a nice looking Table of Contents.

To install, simply add the code snippet to your "Script.js" page below "$(document).ready(function() {" in your theme editor.

You can see an example below:

Stephen Kairys

2019年7月10日

Hi,

Per Tim's comment from last week:

>> It's working on Firefox, Chrome, Internet Explorer, and Edge for me.

Does anyone know if this code is browser-dependent? A former colleague who contributed to this thread (Nick Smolnehy) implemented this feature here. I believe he made some additions to the original code.

Using Chrome, it's been working great, but I started using Firefos yesterday, and:

1. The TOC itself does not display.
2. The headings throughout the document are not auto-numbered e.g

2.1.3 Modify Vendor

appears as

Modify Vendor

Thanks.