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.

  1. Open your document in HTML mode.
  2. Type the following at the very top of the body field.
    3. <div id="kb-doc-TOC"></div>

    This is what it should look like on your screen.

    TOCinbodyfield.png

  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:

    4. <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. Modify the h2,h3 below to suit your document.

    js_TOC_h2_h3.png

  4. While still in HTML mode, begin entering your headers (as seen below, circled in blue) and content beneath each header. Wrap the headers as in the example below:


    5. You can see the table of contents in action in this document.

    Sample Doc: How To Remove Coffee Stains From Your Clothes