KB User's Guide - Documents Tab - Creating Table of Contents (TOC) within a KB page using jQuery

Instructions

1. In the editor, click on the Source code button to edit the HTML.

2. Type the following at the very top of the body field.

   <div id="kb-doc-TOC"></div>

   Click Save in the Source Code window to retain your changes

3. Go to the bottom of the screen and click on the Show Additional Fields plus sign. There you will find a text field called JavaScript/CSS, enter the following:

   <script src="/cssjs/libs/jquery/1.8.2/jquery.min.js"></script>
   <script src="/cssjs/libs/jquery/1.8.2/jquery.toc.min.js"></script>
   <script type="text/javascript">
   /* Specify elements to be used as TOC heading */
   $('#kb-doc-TOC').toc({'selectors': 'h2,h3',});
   </script> 

   This is what it should look like on your screen. You may edit the h2,h3 selectors as needed to reference the heading sizes you would like to use for your table of contents. Please note that heading level 2 (h2) is the largest heading size you should use in your document; heading level 1 (h1) should not be used.

   

4. Once the code has been entered, you can enter additional headings in your document as you normally would. Please note the following:

   • The table of contents will not display in the editor or the Preview window.

   • When editing in rich text mode, there will appear to be an empty line at the top of your document, which contains the code you added in the first step. If this line is deleted, the table of contents will no longer display, and the code will need to be re-added.

   • When you are viewing your document in the KB Admin Tools, your document title may appear in the table of contents, as it is displayed as a heading level 2. When published and viewed on the live site, this will not occur, as your document title will instead display as a heading level 1.

Example of TOC

You can see the table of contents in action in this document: Example of the KB Table of Contents Plug-in