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

A Table of Contents (TOC) at the top of your document can be useful should your document have a lot of content divided by headers. The combination of using a jQuery snippet and wrapping the headers in h2 and/or h3 containers will turn the headers into links at the top of your document. The content will then become easily accessible by clicking on a link. This document will show you how to make a TOC of your very own.

Instructions

  1. In the editor, click on the Source code button which appears in the toolbar and is represented by greater than and lesser than signs 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.

    Screenshot showing the above code inside of the Javascript/CSS field

  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




Keywords:table of contents create lines of code extract information from HTML title subtitles content h1 h2 h3 elements assign unique ID append link elements as headers automatic anchors   Doc ID:22302
Owner:Leah S.Group:KB User's Guide
Created:2012-01-18 13:49 CSTUpdated:2022-11-16 16:12 CST
Sites:KB Demo, KB Demo - Child Demo KB, KB User's Guide
Feedback:  1   1