tag:help.tenderapp.com,2008-11-12:/discussions/questions/12741-is-there-a-way-to-automatically-generate-a-table-of-content-in-a-kb-articleTender: Discussion 2014-07-29T17:10:29Ztag:help.tenderapp.com,2008-11-12:Comment/337957392014-07-16T14:04:24Z2014-07-16T14:04:24ZGenerate a table of content in a KB article?<div><p>Hi Sébastien,</p>
<p>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.</p>
<p>That being said, your site has custom JS, and you can easily
accomplish it in custom JS/CSS. Here is a quick outline:</p>
<ul>
<li>
<p>Look for a <code>#toc</code> 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.</p>
</li>
<li>
<p>Create an empty string var to hold the TOC</p>
</li>
<li>
<p>Find all the <code>h1</code>, <code>h2</code>, <code>h3</code>,
<code>h4</code> scoped to the article body and iterate over
them.</p>
</li>
<li>
<p>For each title, lookup the anchor (Tender automatically
generates one). You can see the anchor when you hover a title.</p>
</li>
<li>
<p>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).</p>
</li>
<li>
<p>Once you're done iterating, insert the generated TOC where you
want.</p>
</li>
</ul>
<p>So the final result could look like:</p>
<pre>
<code><p id="toc">
<a class="h1" href="#title1">Title 1</a>
<a class="h2" href="#title2">Title 2</a>
[...]
</p></code>
</pre>
<p>And with the proper CSS look like this:</p>
<pre>
<code>Title 1
Title 2
Title 3
Title A
...
...</code>
</pre>
<p>I would write it for you, but I really have a lot of other
things to do :/</p>
<p>If you need additional help, just let me know.</p>
<p>Note: jQuery is available on the frontend too, just use
<code>jQuery</code> instead of <code>$</code> or use a closure to
shortcut the name.</p>
<p>Cheers.</p></div>Julientag:help.tenderapp.com,2008-11-12:Comment/337957392014-07-16T15:39:03Z2014-07-16T15:39:03ZGenerate a table of content in a KB article?<div><p>It would be useful if I wrote the code. Not useful as only
instructions.​<br>
ᐧ</p></div>Julientag:help.tenderapp.com,2008-11-12:Comment/337957392014-07-23T16:11:52Z2014-07-23T16:11:52ZGenerate a table of content in a KB article?<div><p>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.</p>
<p>If there is anything more I can do, let me know.</p>
<p>Cheers!</p></div>Julien