Home → Questions →

Generate a table of content in a KB article?

• Edit

Sébastien Meunier

16 Jul, 2014 11:49 AM

I'd like to know if there's a way to automate the creation of a table of content as an intro of my KB articles, using the H1, H2, H3 of the article?

Thanks

Sebastien

1. 1 Posted by Julien on 16 Jul, 2014 02:04 PM

   

   Hi Sébastien,

   I don't think we'll integrate that into Tender directly. THe usefulness of a TOC really depends on the size of the article. Having it automatically on all articles would be annoying for all articles that only have one or two titles.

   That being said, your site has custom JS, and you can easily accomplish it in custom JS/CSS. Here is a quick outline:

   • Look for a #toc element and continue if it's there. This makes it easy to only show the TOC on specific articles by adding an empty span/div with the right ID.

   • Create an empty string var to hold the TOC

   • Find all the h1, h2, h3, h4 scoped to the article body and iterate over them.

   • For each title, lookup the anchor (Tender automatically generates one). You can see the anchor when you hover a title.

   • Once you have the anchor, add a link to it to your TOC variable. This can be accomplished in DOM or as a string. Add a class depending on the title level (this will make it easier to simulate a list via CSS and padding/margin).

   • Once you're done iterating, insert the generated TOC where you want.

   So the final result could look like:

   <p id="toc">
   <a class="h1" href="#title1">Title 1</a>
   <a class="h2" href="#title2">Title 2</a>
   [...]
   </p>
   

   And with the proper CSS look like this:

   Title 1
       Title 2
       Title 3
   Title A
       ...
       ...
   

   I would write it for you, but I really have a lot of other things to do :/

   If you need additional help, just let me know.

   Note: jQuery is available on the frontend too, just use jQuery instead of $ or use a closure to shortcut the name.

   Cheers.

   • Edit

2. 2 Posted by Julien on 16 Jul, 2014 03:39 PM

   

   It would be useful if I wrote the code. Not useful as only instructions.​
   ᐧ

   • Edit

3. 3 Posted by Julien on 23 Jul, 2014 04:11 PM

   

   Oops, sorry last comment was supposed to be internal. Pondering if this should be a KB. I wish I had more time available to actually write the code for you, but I hope that was helpful anyway.

   If there is anything more I can do, let me know.

   Cheers!

   • Edit

4. Julien closed this discussion on 29 Jul, 2014 05:10 PM.